@b3dotfun/sdk 0.0.30 → 0.0.31

package/dist/esm/global-account/react/components/ManageAccount/ContentTokens.js

@@ -0,0 +1,266 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ALL_CHAINS, getExplorerTxUrl } from "../../../../anyspend/index.js";
+import { ChainTokenIcon } from "../../../../anyspend/react/components/common/ChainTokenIcon.js";
+import { Button, TransitionPanel, useAnalytics, useSimBalance, useUnifiedChainSwitchAndExecute, } from "../../../../global-account/react/index.js";
+import { formatDisplayNumber, formatTokenAmount } from "../../../../shared/utils/number.js";
+import { ArrowLeft, CircleHelp, Copy, Loader2, Send } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { NumericFormat } from "react-number-format";
+import { toast } from "sonner";
+import { useActiveAccount } from "thirdweb/react";
+import { encodeFunctionData, erc20Abi, isAddress, parseUnits } from "viem";
+import invariant from "invariant";
+// Panel view enum for managing navigation between token list and send form
+var TokenPanelView;
+(function (TokenPanelView) {
+    TokenPanelView[TokenPanelView["LIST"] = 0] = "LIST";
+    TokenPanelView[TokenPanelView["SEND"] = 1] = "SEND";
+})(TokenPanelView || (TokenPanelView = {}));
+/**
+ * ContentTokens Component
+ *
+ * Displays user's token balances with ability to send tokens. Features:
+ * - Animated transitions between token list and send form
+ * - Smart filtering (shows all tokens when ≤5 valuable tokens or no $1+ tokens)
+ * - NumericFormat inputs for proper number handling
+ * - Focus preservation during transitions (see render functions pattern below)
+ */
+export function ContentTokens({ activeTab }) {
+    // === TOKEN FILTERING STATE ===
+    const [showAllTokens, setShowAllTokens] = useState(false);
+    // === NAVIGATION STATE ===
+    const [tokenPanelView, setTokenPanelView] = useState(TokenPanelView.LIST);
+    // === SEND FORM STATE ===
+    const [selectedToken, setSelectedToken] = useState(null);
+    const [recipientAddress, setRecipientAddress] = useState("");
+    const [sendAmount, setSendAmount] = useState("");
+    const [isSending, setIsSending] = useState(false);
+    const [addressError, setAddressError] = useState("");
+    // === ANIMATION STATE ===
+    // CRITICAL: useRef for animation direction prevents component remounting
+    // This ensures input focus is preserved during panel transitions
+    const animationDirection = useRef(null);
+    // === DATA FETCHING ===
+    const account = useActiveAccount();
+    const { data: simBalance, refetch: refetchSimBalance, isLoading: isLoadingBalance } = useSimBalance(account?.address);
+    // === BLOCKCHAIN INTERACTION ===
+    const { switchChainAndExecute } = useUnifiedChainSwitchAndExecute();
+    // === ANALYTICS ===
+    const { sendAnalyticsEvent } = useAnalytics();
+    // === ADDRESS VALIDATION ===
+    // Handle recipient address change with real-time validation using viem
+    const handleRecipientAddressChange = (value) => {
+        setRecipientAddress(value);
+        // Only show error if user has typed something and it's invalid
+        // Using viem's isAddress for robust EVM address validation
+        if (value && !isAddress(value)) {
+            setAddressError("Please enter a valid EVM address (0x...)");
+        }
+        else {
+            setAddressError("");
+        }
+    };
+    // === TAB RESET EFFECT ===
+    // Reset all state when user switches away from tokens tab
+    useEffect(() => {
+        if (activeTab !== "tokens") {
+            setTokenPanelView(TokenPanelView.LIST);
+            setSelectedToken(null);
+            setRecipientAddress("");
+            setSendAmount("");
+            setIsSending(false);
+            setAddressError("");
+            animationDirection.current = null;
+        }
+    }, [activeTab]);
+    // === HELPER FUNCTION ===
+    // Get current version of selected token from fresh balance data
+    // 🔧 FIX: Prevents auto-navigation back to token list when balance refreshes
+    // The useSimBalance hook refreshes data, creating new token object references
+    // This helper ensures we always get the fresh token data instead of stale references
+    const getCurrentSelectedToken = () => {
+        if (!selectedToken || !simBalance?.balances) {
+            return null;
+        }
+        const found = simBalance.balances.find(token => token.chain_id === selectedToken.chain_id && token.address === selectedToken.address);
+        return found || null;
+    };
+    // ==================================================================================
+    // === RENDER FUNCTIONS (NOT COMPONENTS!) ===
+    // ==================================================================================
+    //
+    // 🚨 CRITICAL ARCHITECTURE DECISION:
+    // These are render functions, NOT component functions with useCallback!
+    //
+    // WHY THIS WORKS:
+    // ✅ Stable wrapper <div> elements with consistent keys
+    // ✅ React never sees these as "new components"
+    // ✅ Input focus is preserved during transitions
+    // ✅ No component remounting issues
+    //
+    // WHY useCallback DIDN'T WORK:
+    // ❌ useCallback(() => <JSX />, [deps]) still creates new component instances
+    // ❌ React treats each render as a different component
+    // ❌ Causes remounting and focus loss
+    //
+    // THE PATTERN:
+    // Instead of: {[<ComponentA />, <ComponentB />]}
+    // We use:    {[<div key="a">{renderA()}</div>, <div key="b">{renderB()}</div>]}
+    // ==================================================================================
+    /**
+     * Renders the send token form panel
+     * Includes recipient input, amount input with NumericFormat, and percentage buttons
+     */
+    const renderSendTokenPanel = () => {
+        // Get fresh token data to prevent stale references
+        const currentToken = getCurrentSelectedToken();
+        // 🔧 SINGLE FALLBACK STRATEGY:
+        // Use fresh token data when available, fall back to selectedToken if needed
+        // This prevents duplication of "currentToken || selectedToken" throughout the component
+        const displayToken = currentToken || selectedToken;
+        // Handle percentage button clicks (25%, 50%, 75%, 100%)
+        const handlePercentageClick = (percentage) => {
+            if (displayToken) {
+                const tokenBalance = (BigInt(displayToken.amount) * BigInt(percentage)) / BigInt(100);
+                const amount = formatTokenAmount(tokenBalance, displayToken.decimals, 30, false);
+                setSendAmount(amount);
+            }
+        };
+        // Execute token transfer transaction
+        const handleSend = async () => {
+            if (!displayToken || !recipientAddress || !sendAmount || parseFloat(sendAmount) <= 0) {
+                return;
+            }
+            setIsSending(true);
+            const amountInWei = parseUnits(sendAmount, displayToken.decimals);
+            // Prepare analytics event data
+            const analyticsData = {
+                amount: sendAmount,
+                symbol: displayToken.symbol,
+                chain_id: displayToken.chain_id,
+                address: displayToken.address,
+            };
+            try {
+                invariant(isAddress(recipientAddress), "Recipient address is not a valid address");
+                const sendTokenData = encodeFunctionData({
+                    abi: erc20Abi,
+                    functionName: "transfer",
+                    args: [recipientAddress, amountInWei],
+                });
+                const tx = await switchChainAndExecute(displayToken.chain_id, {
+                    to: displayToken.address === "native" ? recipientAddress : displayToken.address,
+                    data: sendTokenData,
+                    value: displayToken.address === "native" ? amountInWei : BigInt(0),
+                });
+                if (tx) {
+                    // Track successful send
+                    sendAnalyticsEvent("send_token_button_click", {
+                        ...analyticsData,
+                        success: true,
+                        tx: getExplorerTxUrl(displayToken.chain_id, tx),
+                    });
+                    // Reset form
+                    setSendAmount("");
+                }
+            }
+            catch (error) {
+                // Track failed send
+                sendAnalyticsEvent("send_token_button_click", {
+                    ...analyticsData,
+                    success: false,
+                    reason: error.message || "Unknown error",
+                });
+                // Error
+                toast.error(`Failed to send ${displayToken.symbol}: ${error.message || "Unknown error"}`);
+            }
+            finally {
+                // Wait 1 second to make sure the tx is indexed on sim api.
+                setTimeout(async () => {
+                    // Force refetch to bypass cache and get fresh balance data
+                    await refetchSimBalance();
+                }, 1000);
+                setIsSending(false);
+            }
+        };
+        // Show loading state only if no token data is available at all
+        if (!displayToken) {
+            return (_jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-center", children: [_jsx("div", { className: "bg-b3-line/50 mb-4 rounded-full p-4", children: _jsx(Loader2, { className: "text-b3-foreground-muted h-8 w-8 animate-spin" }) }), _jsx("h3", { className: "text-b3-grey font-neue-montreal-semibold mb-2", children: "Loading token data..." }), _jsx("p", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "Please wait while we fetch the latest information" })] }));
+        }
+        return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Button, { variant: "ghost", size: "icon", onClick: () => {
+                                animationDirection.current = "back";
+                                setTokenPanelView(TokenPanelView.LIST);
+                            }, className: "hover:bg-b3-line/60", disabled: isSending, children: _jsx(ArrowLeft, { className: "h-5 w-5" }) }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center", children: ALL_CHAINS[displayToken.chain_id]?.logoUrl ? (_jsx(ChainTokenIcon, { chainUrl: ALL_CHAINS[displayToken.chain_id].logoUrl, tokenUrl: displayToken.token_metadata?.logo, className: "size-8" })) : (_jsx(CircleHelp, { className: "text-b3-react-foreground size-8" })) }), _jsxs("h2", { className: "text-b3-grey font-neue-montreal-semibold text-lg", children: ["Send ", displayToken.symbol] })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-b3-grey font-neue-montreal-medium text-sm", children: "Recipient Address" }), _jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "relative", children: [_jsx("input", { type: "text", value: recipientAddress, onChange: e => handleRecipientAddressChange(e.target.value), placeholder: "Enter wallet address (0x...)", className: `border-b3-line bg-b3-background text-b3-grey font-neue-montreal-medium placeholder:text-b3-foreground-muted w-full rounded-xl border px-4 py-3 pr-12 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 ${addressError ? "border-red-500 focus:border-red-500" : "focus:border-b3-primary-blue"}`, disabled: isSending }), _jsx(Button, { variant: "ghost", size: "icon", className: "hover:bg-b3-line/60 absolute right-2 top-1/2 h-8 w-8 -translate-y-1/2", disabled: isSending, onClick: () => {
+                                                navigator.clipboard.readText().then(text => {
+                                                    handleRecipientAddressChange(text);
+                                                });
+                                            }, children: _jsx(Copy, { className: "h-4 w-4" }) })] }), addressError && _jsx("p", { className: "font-neue-montreal-medium text-xs text-red-500", children: addressError })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-b3-grey font-neue-montreal-medium text-sm", children: "Amount" }), _jsxs("div", { className: "space-y-3", children: [_jsx(NumericFormat, { decimalSeparator: ".", allowedDecimalSeparators: [","], thousandSeparator: true, inputMode: "decimal", autoComplete: "off", autoCorrect: "off", type: "text", placeholder: "0.00", minLength: 1, maxLength: 30, spellCheck: "false", className: "border-b3-line bg-b3-background text-b3-grey font-neue-montreal-medium placeholder:text-b3-foreground-muted focus:border-b3-primary-blue w-full rounded-xl border px-4 py-3 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50", pattern: "^[0-9]*[.,]?[0-9]*$", disabled: isSending, value: sendAmount, allowNegative: false, onChange: e => setSendAmount(e.currentTarget.value) }), _jsx("div", { className: "grid grid-cols-4 gap-2", children: [25, 50, 75, 100].map(percentage => (_jsxs(Button, { variant: "outline", onClick: () => handlePercentageClick(percentage), className: "hover:bg-b3-primary-wash border-b3-line text-b3-grey font-neue-montreal-medium text-sm", disabled: isSending, children: [percentage, "%"] }, percentage))) }), _jsxs("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: ["Available: ", formatTokenAmount(BigInt(displayToken.amount), displayToken.decimals), " ", displayToken.symbol] })] })] }), _jsx(Button, { onClick: handleSend, disabled: !recipientAddress ||
+                        !sendAmount ||
+                        parseFloat(sendAmount) <= 0 ||
+                        isSending ||
+                        !!addressError ||
+                        !isAddress(recipientAddress), className: "bg-b3-primary-blue hover:bg-b3-primary-blue/90 font-neue-montreal-semibold disabled:bg-b3-line disabled:text-b3-foreground-muted w-full rounded-xl py-3 text-white", children: isSending ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), "Sending..."] })) : (_jsxs(_Fragment, { children: [_jsx(Send, { className: "mr-2 h-4 w-4" }), "Send ", displayToken.symbol] })) })] }));
+    };
+    // Skeleton loading component for token list
+    const LoadingIndicator = () => (_jsx("div", { className: "space-y-4", children: _jsx("div", { className: "space-y-1", children: [...Array(3)].map((_, index) => (_jsxs("div", { className: "flex items-center justify-between rounded-xl p-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "bg-b3-line h-10 w-10 animate-pulse rounded-full" }), _jsxs("div", { children: [_jsx("div", { className: "bg-b3-line mb-1 h-4 w-16 animate-pulse rounded" }), _jsx("div", { className: "bg-b3-line h-3 w-24 animate-pulse rounded" })] })] }), _jsxs("div", { className: "text-right", children: [_jsx("div", { className: "bg-b3-line mb-1 h-4 w-20 animate-pulse rounded" }), _jsx("div", { className: "bg-b3-line h-3 w-16 animate-pulse rounded" })] })] }, index))) }) }));
+    /**
+     * Renders the token list panel with smart filtering
+     * Features intelligent token display logic to reduce noise while ensuring visibility
+     */
+    const renderTokenListPanel = () => {
+        // Show loading indicator when balance is loading
+        if (isLoadingBalance) {
+            return _jsx(LoadingIndicator, {});
+        }
+        // Show empty state when no account or no balance data
+        if (!account?.address || !simBalance) {
+            return (_jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-center", children: [_jsx("div", { className: "bg-b3-line/50 mb-4 rounded-full p-4", children: _jsx(Loader2, { className: "text-b3-foreground-muted h-8 w-8" }) }), _jsx("h3", { className: "text-b3-grey font-neue-montreal-semibold mb-2", children: "No wallet connected" }), _jsx("p", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "Connect your wallet to view token balances" })] }));
+        }
+        // === SMART FILTERING LOGIC ===
+        // Filter tokens with value >= $1 to reduce noise from dust tokens
+        const filteredTokens = simBalance?.balances.filter(token => token.value_usd !== undefined && token.value_usd >= 1) || [];
+        // 🧠 INTELLIGENT DISPLAY LOGIC:
+        // Show all tokens automatically when filtering would be unhelpful:
+        // 1. User explicitly requested to show all, OR
+        // 2. No tokens with value >= $1 (user has only dust), OR
+        // 3. 5 or fewer tokens with value >= $1 (not enough to warrant filtering)
+        const shouldShowAllTokens = showAllTokens || filteredTokens.length === 0 || filteredTokens.length <= 5;
+        const tokensToShow = shouldShowAllTokens ? simBalance?.balances || [] : filteredTokens;
+        const hasHiddenTokens = !shouldShowAllTokens && (simBalance?.balances.length || 0) > filteredTokens.length;
+        // Handle token selection and navigate to send form
+        const handleTokenClick = (token) => {
+            setSelectedToken(token);
+            animationDirection.current = "forward"; // Set animation direction BEFORE state change
+            setTokenPanelView(TokenPanelView.SEND);
+            // Reset form when selecting a new token
+            setRecipientAddress("");
+            setSendAmount("");
+            setIsSending(false);
+            setAddressError("");
+        };
+        // Show empty state when no tokens are available
+        if (tokensToShow.length === 0) {
+            return (_jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-center", children: [_jsx("div", { className: "bg-b3-line/50 mb-4 rounded-full p-4", children: _jsx(CircleHelp, { className: "text-b3-foreground-muted h-8 w-8" }) }), _jsx("h3", { className: "text-b3-grey font-neue-montreal-semibold mb-2", children: "No tokens found" }), _jsx("p", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "No token balances found in your wallet." })] }));
+        }
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "space-y-1", children: tokensToShow.map(token => (_jsxs("div", { className: "hover:bg-b3-line/60 dark:hover:bg-b3-primary-wash/40 group flex cursor-pointer items-center justify-between rounded-xl p-3 transition-all duration-200", onClick: () => handleTokenClick(token), children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full", children: ALL_CHAINS[token.chain_id]?.logoUrl ? (_jsx(ChainTokenIcon, { chainUrl: ALL_CHAINS[token.chain_id].logoUrl, tokenUrl: token.token_metadata?.logo, className: "size-10" })) : (_jsx(CircleHelp, { className: "text-b3-react-foreground size-10" })) }), _jsxs("div", { children: [_jsx("div", { className: "flex items-center gap-2", children: _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold transition-colors duration-200 group-hover:font-bold group-hover:text-black", children: token.symbol }) }), _jsx("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm transition-colors duration-200 group-hover:text-gray-700", children: token.name })] })] }), _jsxs("div", { className: "text-right", children: [_jsx("div", { className: "text-b3-grey font-neue-montreal-semibold transition-colors duration-200 group-hover:font-bold group-hover:text-black", children: formatTokenAmount(BigInt(token.amount), token.decimals) }), _jsx("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm transition-colors duration-200 group-hover:text-gray-700", children: formatDisplayNumber(token.value_usd, { style: "currency", fractionDigits: 2 }) })] })] }, token.chain_id + "_" + token.address))) }), hasHiddenTokens && !showAllTokens && (_jsx("div", { className: "flex justify-center", children: _jsx(Button, { variant: "ghost", className: "text-b3-primary-blue hover:text-b3-primary-blue/80 font-neue-montreal-semibold text-sm", onClick: () => setShowAllTokens(true), children: "Show more" }) }))] }));
+    };
+    // === ANIMATION CONFIGURATION ===
+    // Memoize variants to prevent re-creation and unwanted re-renders
+    const variants = useMemo(() => ({
+        enter: (direction) => ({
+            x: direction === "back" ? -300 : 300, // Back: slide from left, Forward: slide from right
+            opacity: 0,
+        }),
+        center: { x: 0, opacity: 1 }, // Final position: centered and visible
+        exit: (direction) => ({
+            x: direction === "back" ? 300 : -300, // Back: slide to right, Forward: slide to left
+            opacity: 0,
+        }),
+    }), []);
+    // Memoize transition config for consistent spring animation
+    const transition = useMemo(() => ({
+        type: "spring",
+        stiffness: 300, // Spring tension
+        damping: 30, // Spring damping
+    }), []);
+    return (_jsx(TransitionPanel, { activeIndex: tokenPanelView, className: "min-h-[400px]", custom: animationDirection.current, variants: variants, transition: transition, children: [_jsx("div", { children: renderTokenListPanel() }, "token-list"), _jsx("div", { children: renderSendTokenPanel() }, "send-token")] }));
+}

package/dist/esm/global-account/react/components/ManageAccount/ManageAccount.js

@@ -1,46 +1,28 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button, CopyToClipboard, TabsContentPrimitive, TabsListPrimitive, TabsPrimitive, TabTriggerPrimitive, useAccountAssets, useAuthentication, useB3BalanceFromAddresses, useGetAllTWSigners, useModalStore, useNativeBalance, useProfile, useRemoveSessionKey, } from "../../../../global-account/react/index.js";
-import { BankIcon } from "../../../../global-account/react/components/icons/BankIcon.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, TabsContentPrimitive, TabsListPrimitive, TabsPrimitive, TabTriggerPrimitive, useAccountAssets, useAuthentication, useGetAllTWSigners, useModalStore, useRemoveSessionKey, } from "../../../../global-account/react/index.js";
 import { SignOutIcon } from "../../../../global-account/react/components/icons/SignOutIcon.js";
-import { SwapIcon } from "../../../../global-account/react/components/icons/SwapIcon.js";
-import { formatUsername } from "../../../../shared/utils/index.js";
 import { formatNumber } from "../../../../shared/utils/formatNumber.js";
 import { client } from "../../../../shared/utils/thirdweb.js";
-import { LinkIcon, Loader2, Pencil, Triangle, UnlinkIcon } from "lucide-react";
+import { BarChart3, Coins, Image, LinkIcon, Loader2, Settings, UnlinkIcon } from "lucide-react";
 import { useState } from "react";
 import { useActiveAccount, useProfiles, useUnlinkProfile } from "thirdweb/react";
 import { formatUnits } from "viem";
-import useFirstEOA from "../../hooks/useFirstEOA.js";
 import { getProfileDisplayInfo } from "../../utils/profileDisplay.js";
 import { AccountAssets } from "../AccountAssets/AccountAssets.js";
-function centerTruncate(str, length = 4) {
-    if (str.length <= length * 2)
-        return str;
-    return `${str.slice(0, length)}...${str.slice(-length)}`;
-}
+import { ContentTokens } from "./ContentTokens.js";
+import { BalanceContent } from "./BalanceContent.js";
 export function ManageAccount({ onLogout, onSwap: _onSwap, onDeposit: _onDeposit, chain, partnerId, }) {
     const [revokingSignerId, setRevokingSignerId] = useState(null);
     const account = useActiveAccount();
-    const { data: assets, isLoading } = useAccountAssets(account?.address);
-    const { data: b3Balance } = useB3BalanceFromAddresses(account?.address);
-    const { data: nativeBalance } = useNativeBalance(account?.address);
-    const { address: eoaAddress } = useFirstEOA();
-    const { data: profile } = useProfile({
-        address: eoaAddress || account?.address,
-        fresh: true,
-    });
-    const { data: eoaNativeBalance } = useNativeBalance(eoaAddress);
-    const { data: eoaB3Balance } = useB3BalanceFromAddresses(eoaAddress);
+    const { data: nfts, isLoading } = useAccountAssets(account?.address);
     const { data: signers, refetch: refetchSigners } = useGetAllTWSigners({
         chain,
         accountAddress: account?.address,
     });
-    const { setB3ModalOpen, setB3ModalContentType, contentType } = useModalStore();
-    const { activeTab = "balance", setActiveTab } = contentType;
+    const { setB3ModalOpen, contentType } = useModalStore();
+    const { activeTab = "overview", setActiveTab } = contentType;
     const { logout } = useAuthentication(partnerId);
     const [logoutLoading, setLogoutLoading] = useState(false);
-    console.log("account", account);
-    console.log("eoaAddress", eoaAddress);
     const { removeSessionKey } = useRemoveSessionKey({
         chain,
         onSuccess: tx => {
@@ -64,24 +46,6 @@ export function ManageAccount({ onLogout, onSwap: _onSwap, onDeposit: _onDeposit
         setB3ModalOpen(false);
         setLogoutLoading(false);
     };
-    const BalanceContent = () => {
-        const { info: eoaInfo } = useFirstEOA();
-        return (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsx("div", { className: "flex items-center justify-between", children: _jsxs("div", { className: "flex items-center gap-4", children: [_jsxs("div", { className: "relative", children: [profile?.avatar ? (_jsx("img", { src: profile?.avatar, alt: "Profile", className: "size-24 rounded-full" })) : (_jsx("div", { className: "bg-b3-primary-wash size-24 rounded-full" })), _jsx("div", { className: "bg-b3-grey border-b3-background absolute -bottom-1 -right-1 flex size-8 items-center justify-center rounded-full border-4", children: _jsx(Pencil, { size: 16, className: "text-b3-background" }) })] }), _jsxs("div", { children: [_jsx("h2", { className: "text-b3-grey text-xl font-semibold", children: profile?.displayName || formatUsername(profile?.name || "") }), _jsx("span", { className: "text-b3-foreground-muted", children: formatUsername(profile?.name || "") })] })] }) }), _jsxs("div", { className: "manage-account-address bg-b3-line flex h-11 items-center gap-2 rounded-full px-4", children: [_jsx("span", { className: "text-b3-grey font-neue-montreal-semibold", children: centerTruncate(account?.address || "") }), _jsx(CopyToClipboard, { text: account?.address || "" })] }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs(Button, { className: "manage-account-deposit bg-b3-primary-wash hover:bg-b3-primary-wash/70 h-[84px] w-full flex-col items-start gap-2 rounded-2xl", onClick: () => {
-                                setB3ModalOpen(true);
-                                setB3ModalContentType({
-                                    type: "anySpend",
-                                    defaultActiveTab: "fiat",
-                                    showBackButton: true,
-                                });
-                            }, children: [_jsx(BankIcon, { size: 24, className: "text-b3-primary-blue shrink-0" }), _jsx("div", { className: "text-b3-grey font-neue-montreal-semibold", children: "Deposit" })] }), _jsxs(Button, { className: "manage-account-swap bg-b3-primary-wash hover:bg-b3-primary-wash/70 flex h-[84px] w-full flex-col items-start gap-2 rounded-2xl", onClick: () => {
-                                setB3ModalOpen(true);
-                                setB3ModalContentType({
-                                    type: "anySpend",
-                                    showBackButton: true,
-                                });
-                            }, children: [_jsx(SwapIcon, { size: 24, className: "text-b3-primary-blue" }), _jsx("div", { className: "text-b3-grey font-neue-montreal-semibold", children: "Swap" })] })] }), _jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-b3-grey font-neue-montreal-semibold", children: "Balance" }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full", children: _jsx("img", { src: "https://cdn.b3.fun/b3-coin-3d.png", alt: "B3", className: "size-10" }) }), _jsxs("div", { children: [_jsx("div", { className: "flex items-center gap-2", children: _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold", children: "B3" }) }), _jsxs("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: [b3Balance?.formattedTotal || "0.00", " B3"] })] })] }), _jsxs("div", { className: "text-right", children: [_jsxs("div", { className: "text-b3-grey font-neue-montreal-semibold", children: ["$", b3Balance?.balanceUsdFormatted || "0.00"] }), _jsx("div", { className: "flex items-center gap-1", children: b3Balance?.priceChange24h !== null && b3Balance?.priceChange24h !== undefined ? (_jsxs(_Fragment, { children: [_jsx(Triangle, { className: `size-3 ${b3Balance.priceChange24h >= 0 ? "text-b3-positive fill-b3-positive" : "text-b3-negative fill-b3-negative rotate-180"}` }), _jsxs("span", { className: `font-neue-montreal-medium text-sm ${b3Balance.priceChange24h >= 0 ? "text-b3-positive" : "text-b3-negative"}`, children: [b3Balance.priceChange24h >= 0 ? "+" : "", b3Balance.priceChange24h.toFixed(2), "%"] })] })) : (_jsx("span", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "--" })) })] })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full", children: _jsx("img", { src: "https://cdn.b3.fun/ethereum.svg", alt: "ETH", className: "size-10" }) }), _jsxs("div", { children: [_jsx("div", { className: "flex items-center gap-2", children: _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold", children: "Ethereum" }) }), _jsxs("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: [nativeBalance?.formattedTotal || "0.00", " ETH"] })] })] }), _jsxs("div", { className: "text-right", children: [_jsxs("div", { className: "text-b3-grey font-neue-montreal-semibold", children: ["$", nativeBalance?.formattedTotalUsd || "0.00"] }), _jsx("div", { className: "flex items-center gap-2", children: nativeBalance?.priceChange24h !== null && nativeBalance?.priceChange24h !== undefined ? (_jsxs(_Fragment, { children: [_jsx(Triangle, { className: `size-3 ${nativeBalance.priceChange24h >= 0 ? "text-b3-positive fill-b3-positive" : "text-b3-negative fill-b3-negative rotate-180"}` }), _jsxs("span", { className: `font-neue-montreal-medium text-sm ${nativeBalance.priceChange24h >= 0 ? "text-b3-positive" : "text-b3-negative"}`, children: [nativeBalance.priceChange24h >= 0 ? "+" : "", nativeBalance.priceChange24h.toFixed(2), "%"] })] })) : (_jsx("span", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "--" })) })] })] })] }), eoaAddress && (_jsxs("div", { className: "space-y-4", children: [_jsxs("h3", { className: "text-b3-grey font-neue-montreal-semibold", children: ["Connected ", eoaInfo?.data?.name || "Wallet"] }), _jsxs("div", { className: "manage-account-address bg-b3-line flex h-11 items-center gap-2 rounded-full px-4", children: [_jsx("span", { className: "text-b3-grey font-neue-montreal-semibold", children: centerTruncate(eoaAddress) }), _jsx(CopyToClipboard, { text: eoaAddress })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full", children: _jsx("img", { src: "https://cdn.b3.fun/b3-coin-3d.png", alt: "B3", className: "size-10" }) }), _jsxs("div", { children: [_jsx("div", { className: "flex items-center gap-2", children: _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold", children: "B3" }) }), _jsxs("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: [eoaB3Balance?.formattedTotal || "0.00", " B3"] })] })] }), _jsxs("div", { className: "text-right", children: [_jsxs("div", { className: "text-b3-grey font-neue-montreal-semibold", children: ["$", eoaB3Balance?.balanceUsdFormatted || "0.00"] }), _jsx("div", { className: "flex items-center gap-1", children: eoaB3Balance?.priceChange24h !== null && eoaB3Balance?.priceChange24h !== undefined ? (_jsxs(_Fragment, { children: [_jsx(Triangle, { className: `size-3 ${eoaB3Balance.priceChange24h >= 0 ? "text-b3-positive fill-b3-positive" : "text-b3-negative fill-b3-negative rotate-180"}` }), _jsxs("span", { className: `font-neue-montreal-medium text-sm ${eoaB3Balance.priceChange24h >= 0 ? "text-b3-positive" : "text-b3-negative"}`, children: [eoaB3Balance.priceChange24h >= 0 ? "+" : "", eoaB3Balance.priceChange24h.toFixed(2), "%"] })] })) : (_jsx("span", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "--" })) })] })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full", children: _jsx("img", { src: "https://cdn.b3.fun/ethereum.svg", alt: "ETH", className: "size-10" }) }), _jsxs("div", { children: [_jsx("div", { className: "flex items-center gap-2", children: _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold", children: "Ethereum" }) }), _jsxs("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: [eoaNativeBalance?.formattedTotal || "0.00", " ETH"] })] })] }), _jsxs("div", { className: "text-right", children: [_jsxs("div", { className: "text-b3-grey font-neue-montreal-semibold", children: ["$", eoaNativeBalance?.formattedTotalUsd || "0.00"] }), _jsx("div", { className: "flex items-center gap-2", children: eoaNativeBalance?.priceChange24h !== null && eoaNativeBalance?.priceChange24h !== undefined ? (_jsxs(_Fragment, { children: [_jsx(Triangle, { className: `size-3 ${eoaNativeBalance.priceChange24h >= 0 ? "text-b3-positive fill-b3-positive" : "text-b3-negative fill-b3-negative rotate-180"}` }), _jsxs("span", { className: `font-neue-montreal-medium text-sm ${eoaNativeBalance.priceChange24h >= 0 ? "text-b3-positive" : "text-b3-negative"}`, children: [eoaNativeBalance.priceChange24h >= 0 ? "+" : "", eoaNativeBalance.priceChange24h.toFixed(2), "%"] })] })) : (_jsx("span", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "--" })) })] })] })] })), _jsxs("div", { className: "border-b3-line flex items-center justify-between rounded-2xl border p-4", children: [_jsxs("div", { className: "", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("img", { src: "https://cdn.b3.fun/b3_logo.svg", alt: "B3", className: "h-4" }), _jsx("h3", { className: "font-neue-montreal-semibold text-b3-grey", children: "Global Account" })] }), _jsx("p", { className: "text-b3-foreground-muted font-neue-montreal-medium mt-2 text-sm", children: "Your universal account for all B3-powered apps" })] }), _jsx("button", { className: "text-b3-grey hover:text-b3-grey/80 hover:bg-b3-line border-b3-line flex size-12 items-center justify-center rounded-full border", onClick: onLogoutEnhanced, children: logoutLoading ? _jsx(Loader2, { className: "animate-spin" }) : _jsx(SignOutIcon, { size: 16, className: "text-b3-grey" }) })] })] }));
-    };
-    const AssetsContent = () => (_jsx("div", { className: "grid grid-cols-3 gap-4", children: assets?.nftResponse ? (_jsx(AccountAssets, { nfts: assets.nftResponse, isLoading: isLoading })) : (_jsx("div", { className: "col-span-3 py-12 text-center text-gray-500", children: "No NFTs found" })) }));
     const AppsContent = () => (_jsxs("div", { className: "space-y-4", children: [signers?.map((signer) => (_jsx("div", { className: "rounded-xl border border-gray-200 p-4 dark:border-gray-800", children: _jsxs("div", { className: "flex items-start justify-between", children: [_jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800", children: _jsx("span", { className: "text-xs font-medium text-gray-600 dark:text-gray-400", children: "App" }) }), _jsxs("div", { children: [_jsx("h3", { className: "font-medium text-gray-900 dark:text-white", children: signer.partner.name }), _jsxs("div", { className: "mt-2 space-y-1", children: [_jsxs("p", { className: "text-xs text-gray-500", children: ["Added ", new Date(signer.createdAt).toLocaleDateString()] }), _jsxs("p", { className: "text-xs text-gray-500", children: ["Expires ", new Date(Number(signer.endTimestamp) * 1000).toLocaleDateString()] }), _jsxs("p", { className: "text-xs text-gray-500", children: ["Max spend: ", formatNumber(Number(formatUnits(signer.nativeTokenLimitPerTransaction, 18))), " ETH"] })] })] })] }), _jsx(Button, { variant: "outline", size: "sm", className: "border-red-200 text-red-500 hover:border-red-300 hover:text-red-600", onClick: () => handleRevoke(signer), disabled: revokingSignerId === signer.id, children: revokingSignerId === signer.id ? "Revoking..." : "Revoke" })] }) }, signer.id))), !signers?.length && _jsx("div", { className: "py-12 text-center text-gray-500", children: "No connected apps" })] }));
     const SettingsContent = () => {
         const [unlinkingAccountId, setUnlinkingAccountId] = useState(null);
@@ -97,10 +61,7 @@ export function ManageAccount({ onLogout, onSwap: _onSwap, onDeposit: _onDeposit
         const handleUnlink = async (profile) => {
             setUnlinkingAccountId(profile.title);
             try {
-                await unlinkProfile({
-                    client,
-                    profileToUnlink: profile.originalProfile,
-                });
+                unlinkProfile({ client, profileToUnlink: profile.originalProfile });
             }
             catch (error) {
                 console.error("Error unlinking account:", error);
@@ -127,12 +88,12 @@ export function ManageAccount({ onLogout, onSwap: _onSwap, onDeposit: _onDeposit
                 },
             });
         };
-        return (_jsxs("div", { className: "space-y-8", children: [_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h3", { className: "text-b3-grey font-neue-montreal-semibold text-xl", children: "Linked Accounts" }), _jsxs(Button, { className: "bg-b3-primary-wash hover:bg-b3-primary-wash/70 flex items-center gap-2 rounded-full px-4 py-2", onClick: handleOpenLinkModal, disabled: isLinking, children: [isLinking ? (_jsx(Loader2, { className: "text-b3-primary-blue animate-spin", size: 16 })) : (_jsx(LinkIcon, { size: 16, className: "text-b3-primary-blue" })), _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold", children: isLinking ? "Linking..." : "Link New Account" })] })] }), isLoadingProfiles ? (_jsx("div", { className: "flex justify-center py-8", children: _jsx(Loader2, { className: "text-b3-grey animate-spin" }) })) : profiles.length > 0 ? (_jsx("div", { className: "space-y-4", children: profiles.map(profile => (_jsxs("div", { className: "bg-b3-line flex items-center justify-between rounded-xl p-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [profile.imageUrl ? (_jsx("img", { src: profile.imageUrl, alt: profile.title, className: "size-10 rounded-full" })) : (_jsx("div", { className: "bg-b3-primary-wash flex h-10 w-10 items-center justify-center rounded-full", children: _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-sm uppercase", children: profile.initial }) })), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-b3-grey font-neue-montreal-semibold", children: profile.title }), _jsx("span", { className: "text-b3-foreground-muted font-neue-montreal-medium bg-b3-primary-wash rounded px-2 py-0.5 text-xs", children: profile.type.toUpperCase() })] }), _jsx("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: profile.subtitle })] })] }), _jsx(Button, { variant: "ghost", size: "icon", className: "text-b3-grey hover:text-b3-negative", onClick: () => handleUnlink(profile), disabled: unlinkingAccountId === profile.title || isUnlinking, children: unlinkingAccountId === profile.title || isUnlinking ? (_jsx(Loader2, { className: "animate-spin" })) : (_jsx(UnlinkIcon, { size: 16 })) })] }, profile.title))) })) : (_jsx("div", { className: "text-b3-foreground-muted py-8 text-center", children: "No linked accounts found" }))] }), _jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-b3-grey font-neue-montreal-semibold text-xl", children: "Account Preferences" }), _jsx("div", { className: "bg-b3-line rounded-xl p-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("div", { className: "text-b3-grey font-neue-montreal-semibold", children: "Dark Mode" }), _jsx("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "Switch between light and dark theme" })] }), _jsx("div", { className: "bg-b3-primary-wash h-6 w-12 rounded-full" })] }) })] }), _jsxs("div", { className: "border-b3-line flex items-center justify-between rounded-2xl border p-4", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("img", { src: "https://cdn.b3.fun/b3_logo.svg", alt: "B3", className: "h-4" }), _jsx("h3", { className: "font-neue-montreal-semibold text-b3-grey", children: "Global Account" })] }), _jsx("p", { className: "text-b3-foreground-muted font-neue-montreal-medium mt-2 text-sm", children: "Your universal account for all B3-powered apps" })] }), _jsx("button", { className: "text-b3-grey hover:text-b3-grey/80 hover:bg-b3-line border-b3-line flex size-12 items-center justify-center rounded-full border", onClick: onLogoutEnhanced, children: logoutLoading ? _jsx(Loader2, { className: "animate-spin" }) : _jsx(SignOutIcon, { size: 16, className: "text-b3-grey" }) })] })] }));
+        return (_jsxs("div", { className: "space-y-8", children: [_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h3", { className: "text-b3-grey font-neue-montreal-semibold text-xl", children: "Linked Accounts" }), _jsxs(Button, { className: "bg-b3-primary-wash hover:bg-b3-primary-wash/70 flex items-center gap-2 rounded-full px-4 py-2", onClick: handleOpenLinkModal, disabled: isLinking, children: [isLinking ? (_jsx(Loader2, { className: "text-b3-primary-blue animate-spin", size: 16 })) : (_jsx(LinkIcon, { size: 16, className: "text-b3-primary-blue" })), _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold", children: isLinking ? "Linking..." : "Link New Account" })] })] }), isLoadingProfiles ? (_jsx("div", { className: "flex justify-center py-8", children: _jsx(Loader2, { className: "text-b3-grey animate-spin" }) })) : profiles.length > 0 ? (_jsx("div", { className: "space-y-4", children: profiles.map(profile => (_jsxs("div", { className: "bg-b3-line flex items-center justify-between rounded-xl p-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [profile.imageUrl ? (_jsx("img", { src: profile.imageUrl, alt: profile.title, className: "size-10 rounded-full" })) : (_jsx("div", { className: "bg-b3-primary-wash flex h-10 w-10 items-center justify-center rounded-full", children: _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-sm uppercase", children: profile.initial }) })), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-b3-grey font-neue-montreal-semibold", children: profile.title }), _jsx("span", { className: "text-b3-foreground-muted font-neue-montreal-medium bg-b3-primary-wash rounded px-2 py-0.5 text-xs", children: profile.type.toUpperCase() })] }), _jsx("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: profile.subtitle })] })] }), _jsx(Button, { variant: "ghost", size: "icon", className: "text-b3-grey hover:text-b3-negative", onClick: () => handleUnlink(profile), disabled: unlinkingAccountId === profile.title || isUnlinking, children: unlinkingAccountId === profile.title || isUnlinking ? (_jsx(Loader2, { className: "animate-spin" })) : (_jsx(UnlinkIcon, { size: 16 })) })] }, profile.title))) })) : (_jsx("div", { className: "text-b3-foreground-muted py-8 text-center", children: "No linked accounts found" }))] }), _jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-b3-grey font-neue-montreal-semibold text-xl", children: "Account Preferences" }), _jsx("div", { className: "bg-b3-line rounded-xl p-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("div", { className: "text-b3-grey font-neue-montreal-semibold", children: "Dark Mode" }), _jsx("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "Switch between light and dark theme" })] }), _jsx("div", { className: "bg-b3-primary-wash h-6 w-12 rounded-full" })] }) })] }), _jsxs("div", { className: "border-b3-line flex items-center justify-between rounded-2xl border p-4", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("img", { src: "https://cdn.b3.fun/b3_logo.svg", alt: "B3", className: "h-4" }), _jsx("h3", { className: "font-neue-montreal-semibold text-b3-grey", children: "Global Account" })] }), _jsx("p", { className: "text-b3-foreground-muted font-neue-montreal-medium mt-2 text-sm", children: "Your universal account for all B3 apps" })] }), _jsx("button", { className: "text-b3-grey hover:text-b3-grey/80 hover:bg-b3-line border-b3-line flex size-12 items-center justify-center rounded-full border", onClick: onLogoutEnhanced, children: logoutLoading ? _jsx(Loader2, { className: "animate-spin" }) : _jsx(SignOutIcon, { size: 16, className: "text-b3-grey" }) })] })] }));
     };
     return (_jsx("div", { className: "b3-manage-account bg-b3-background flex flex-col rounded-xl", children: _jsx("div", { className: "flex-1", children: _jsxs(TabsPrimitive, { defaultValue: activeTab, onValueChange: value => {
                     const tab = value;
-                    if (["balance", "assets", "apps", "settings"].includes(tab)) {
+                    if (["overview", "tokens", "nfts", "apps", "settings"].includes(tab)) {
                         setActiveTab?.(tab);
                     }
-                }, children: [_jsxs(TabsListPrimitive, { className: "font-neue-montreal-semibold text-b3-grey flex h-8 w-full items-start justify-start gap-8 border-0 text-xl md:p-4", children: [_jsx(TabTriggerPrimitive, { value: "balance", className: "data-[state=active]:text-b3-primary-blue data-[state=active]:border-b-b3-primary-blue flex-none rounded-none border-0 p-0 pb-1 text-xl leading-none tracking-wide transition-colors data-[state=active]:border-b data-[state=active]:bg-white md:pb-4", children: "Overview" }), _jsx(TabTriggerPrimitive, { value: "assets", className: "data-[state=active]:text-b3-primary-blue data-[state=active]:border-b-b3-primary-blue flex-none rounded-none border-0 p-0 pb-1 text-xl leading-none tracking-wide transition-colors data-[state=active]:border-b data-[state=active]:bg-white md:pb-4", children: "Mints" }), _jsx(TabTriggerPrimitive, { value: "settings", className: "data-[state=active]:text-b3-primary-blue data-[state=active]:border-b-b3-primary-blue flex-none rounded-none border-0 p-0 pb-1 text-xl leading-none tracking-wide transition-colors data-[state=active]:border-b data-[state=active]:bg-white md:pb-4", children: "Settings" })] }), _jsx(TabsContentPrimitive, { value: "balance", className: "pt-4 md:p-4", children: _jsx(BalanceContent, {}) }), _jsx(TabsContentPrimitive, { value: "assets", className: "pt-4 md:p-4", children: _jsx(AssetsContent, {}) }), _jsx(TabsContentPrimitive, { value: "apps", className: "pt-4 md:p-4", children: _jsx(AppsContent, {}) }), _jsx(TabsContentPrimitive, { value: "settings", className: "pt-4 md:p-4", children: _jsx(SettingsContent, {}) })] }) }) }));
+                }, children: [_jsx("div", { className: "px-4", children: _jsxs(TabsListPrimitive, { className: "grid h-auto grid-cols-2 grid-rows-2 gap-3 rounded-none border-none bg-transparent", children: [_jsxs(TabTriggerPrimitive, { value: "overview", className: "data-[state=active]:bg-b3-primary-blue data-[state=active]:hover:bg-b3-primary-blue data-[state=active]:border-b3-primary-blue group flex h-12 w-full items-center justify-center gap-2 rounded-xl border border-gray-200 bg-white p-2 text-center shadow-sm transition-all duration-200 hover:bg-gray-50 hover:shadow-md data-[state=active]:shadow-lg", children: [_jsx(BarChart3, { size: 20, className: "text-b3-primary-blue shrink-0 group-data-[state=active]:text-white" }), _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-sm group-data-[state=active]:text-white", children: "Overview" })] }), _jsxs(TabTriggerPrimitive, { value: "tokens", className: "data-[state=active]:bg-b3-primary-blue data-[state=active]:hover:bg-b3-primary-blue data-[state=active]:border-b3-primary-blue group flex h-12 w-full items-center justify-center gap-2 rounded-xl border border-gray-200 bg-white p-2 text-center shadow-sm transition-all duration-200 hover:bg-gray-50 hover:shadow-md data-[state=active]:shadow-lg", children: [_jsx(Coins, { size: 20, className: "text-b3-primary-blue shrink-0 group-data-[state=active]:text-white" }), _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-sm group-data-[state=active]:text-white", children: "Tokens" })] }), _jsxs(TabTriggerPrimitive, { value: "nfts", className: "data-[state=active]:bg-b3-primary-blue data-[state=active]:hover:bg-b3-primary-blue data-[state=active]:border-b3-primary-blue group flex h-12 w-full items-center justify-center gap-2 rounded-xl border border-gray-200 bg-white p-2 text-center shadow-sm transition-all duration-200 hover:bg-gray-50 hover:shadow-md data-[state=active]:shadow-lg", children: [_jsx(Image, { size: 20, className: "text-b3-primary-blue shrink-0 group-data-[state=active]:text-white" }), _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-sm group-data-[state=active]:text-white", children: "NFTs" })] }), _jsxs(TabTriggerPrimitive, { value: "settings", className: "data-[state=active]:bg-b3-primary-blue data-[state=active]:hover:bg-b3-primary-blue data-[state=active]:border-b3-primary-blue group flex h-12 w-full items-center justify-center gap-2 rounded-xl border border-gray-200 bg-white p-2 text-center shadow-sm transition-all duration-200 hover:bg-gray-50 hover:shadow-md data-[state=active]:shadow-lg", children: [_jsx(Settings, { size: 20, className: "text-b3-primary-blue shrink-0 group-data-[state=active]:text-white" }), _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-sm group-data-[state=active]:text-white", children: "Settings" })] })] }) }), _jsx(TabsContentPrimitive, { value: "overview", className: "px-4 pb-4 pt-2", children: _jsx(BalanceContent, { onLogout: onLogout, partnerId: partnerId }) }), _jsx(TabsContentPrimitive, { value: "tokens", className: "px-4 pb-4 pt-2", children: _jsx(ContentTokens, { activeTab: activeTab }) }), _jsx(TabsContentPrimitive, { value: "nfts", className: "px-4 pb-4 pt-2", children: _jsx("div", { className: "grid grid-cols-3 gap-4", children: nfts?.nftResponse ? (_jsx(AccountAssets, { nfts: nfts.nftResponse, isLoading: isLoading })) : (_jsx("div", { className: "col-span-3 py-12 text-center text-gray-500", children: "No NFTs found" })) }) }), _jsx(TabsContentPrimitive, { value: "apps", className: "px-4 pb-4 pt-2", children: _jsx(AppsContent, {}) }), _jsx(TabsContentPrimitive, { value: "settings", className: "px-4 pb-4 pt-2", children: _jsx(SettingsContent, {}) })] }) }) }));
 }

package/dist/esm/global-account/react/components/ManageAccount/TokenBalanceRow.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+interface TokenBalanceRowProps {
+    icon: ReactNode;
+    name: string;
+    balance: string;
+    usdValue: string;
+    priceChange?: number | null;
+}
+export declare function TokenBalanceRow({ icon, name, balance, usdValue, priceChange }: TokenBalanceRowProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/global-account/react/components/ManageAccount/TokenBalanceRow.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Triangle } from "lucide-react";
+export function TokenBalanceRow({ icon, name, balance, usdValue, priceChange }) {
+    return (_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full", children: icon }), _jsxs("div", { children: [_jsx("div", { className: "flex items-center gap-2", children: _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold", children: name }) }), _jsx("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: balance })] })] }), _jsxs("div", { className: "text-right", children: [_jsxs("div", { className: "text-b3-grey font-neue-montreal-semibold", children: ["$", usdValue] }), _jsx("div", { className: "flex items-center gap-1", children: priceChange !== null && priceChange !== undefined ? (_jsxs(_Fragment, { children: [_jsx(Triangle, { className: `size-3 ${priceChange >= 0 ? "text-b3-positive fill-b3-positive" : "text-b3-negative fill-b3-negative rotate-180"}` }), _jsxs("span", { className: `font-neue-montreal-medium text-sm ${priceChange >= 0 ? "text-b3-positive" : "text-b3-negative"}`, children: [priceChange >= 0 ? "+" : "", priceChange.toFixed(2), "%"] })] })) : (_jsx("span", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "--" })) })] })] }));
+}

package/dist/esm/global-account/react/components/TokenIcon.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+interface TokenIconProps {
+    src: string;
+    alt: string;
+    className?: string;
+    size?: number;
+}
+export declare const TokenIcon: React.FC<TokenIconProps>;
+export declare const B3TokenIcon: React.FC<Omit<TokenIconProps, "src" | "alt">>;
+export declare const EthereumTokenIcon: React.FC<Omit<TokenIconProps, "src" | "alt">>;
+export {};

package/dist/esm/global-account/react/components/TokenIcon.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../shared/utils/index.js";
+import { useCallback, useMemo, useState } from "react";
+// Create a global image cache to prevent re-loading
+const imageCache = new Map();
+export const TokenIcon = ({ src, alt, className, size = 40 }) => {
+    const [isLoaded, setIsLoaded] = useState(() => imageCache.get(src) || false);
+    const [hasError, setHasError] = useState(false);
+    const handleLoad = useCallback(() => {
+        imageCache.set(src, true);
+        setIsLoaded(true);
+    }, [src]);
+    const handleError = useCallback(() => {
+        setHasError(true);
+    }, []);
+    // Memoize the image element to prevent unnecessary re-renders
+    const imageElement = useMemo(() => (_jsx("img", { src: src, alt: alt, className: cn("transition-opacity duration-200", className, {
+            "opacity-100": isLoaded && !hasError,
+            "opacity-0": !isLoaded || hasError,
+        }), onLoad: handleLoad, onError: handleError, loading: "eager" // Load immediately since these are critical UI elements
+        , decoding: "async", style: {
+            width: size,
+            height: size,
+        } })), [src, alt, className, isLoaded, hasError, handleLoad, handleError, size]);
+    // Show a placeholder while loading or if there's an error
+    const placeholder = useMemo(() => (_jsx("div", { className: cn("bg-b3-primary-wash flex items-center justify-center rounded-full transition-opacity duration-200", {
+            "opacity-0": isLoaded && !hasError,
+            "opacity-100": !isLoaded || hasError,
+        }), style: {
+            width: size,
+            height: size,
+        }, children: _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-xs", children: alt.charAt(0).toUpperCase() }) })), [alt, isLoaded, hasError, size]);
+    return (_jsxs("div", { className: "relative inline-block", style: { width: size, height: size }, children: [placeholder, _jsx("div", { className: "absolute inset-0", children: imageElement })] }));
+};
+// Pre-defined token icons for common tokens
+export const B3TokenIcon = props => (_jsx(TokenIcon, { src: "https://cdn.b3.fun/b3-coin-3d.png", alt: "B3", ...props }));
+export const EthereumTokenIcon = props => (_jsx(TokenIcon, { src: "https://cdn.b3.fun/ethereum.svg", alt: "ETH", ...props }));

package/dist/esm/global-account/react/components/ui/accordion.d.ts

@@ -0,0 +1,7 @@
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import * as React from "react";
+declare const Accordion: React.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const AccordionContent: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/dist/esm/global-account/react/components/ui/accordion.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+import * as React from "react";
+import { cn } from "../../../../shared/utils/index.js";
+const Accordion = AccordionPrimitive.Root;
+const AccordionItem = React.forwardRef(({ className, ...props }, ref) => (_jsx(AccordionPrimitive.Item, { ref: ref, className: cn("border-b3-line border-b", className), ...props })));
+AccordionItem.displayName = "AccordionItem";
+const AccordionTrigger = React.forwardRef(({ className, children, ...props }, ref) => (_jsx(AccordionPrimitive.Header, { className: "flex", children: _jsxs(AccordionPrimitive.Trigger, { ref: ref, className: cn("flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180", className), ...props, children: [children, _jsx(ChevronDown, { className: "h-4 w-4 shrink-0 transition-transform duration-200" })] }) })));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+const AccordionContent = React.forwardRef(({ className, children, ...props }, ref) => (_jsx(AccordionPrimitive.Content, { ref: ref, className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm transition-all", ...props, children: _jsx("div", { className: cn("pb-4 pt-0", className), children: children }) })));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/dist/esm/global-account/react/components/ui/dialog.js

@@ -12,7 +12,7 @@ const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(D
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 const DialogContent = React.forwardRef(({ className, children, hideCloseButton = false, closeBtnClassName, ...props }, ref) => {
     const container = typeof window !== "undefined" ? document.getElementById("b3-root") : null;
-    return (_jsxs(DialogPortal, { container: container, children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, className: cn("bg-b3-react-background fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg !outline-none", "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 duration-500", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]", "[perspective:1200px] [transform-style:preserve-3d] sm:rounded-xl", "transition-all ease-out", className), ...props, children: [children, !hideCloseButton && (_jsxs(DialogPrimitive.Close, { className: cn("data-[state=open]:bg-b3-react-background data-[state=open]:text-b3-react-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none dark:data-[state=open]:bg-gray-800 dark:data-[state=open]:text-gray-400", closeBtnClassName), children: [_jsx(X, { className: "h-5 w-5" }), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));
+    return (_jsxs(DialogPortal, { container: container, children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, className: cn("bg-b3-react-background fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg !outline-none", "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 duration-500", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]", "[perspective:1200px] [transform-style:preserve-3d] sm:rounded-xl", "transition-all ease-out", className), ...props, children: [children, !hideCloseButton && (_jsxs(DialogPrimitive.Close, { className: cn("modal-close-button data-[state=open]:bg-b3-react-background data-[state=open]:text-b3-react-muted-foreground absolute right-2 top-2 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none dark:data-[state=open]:bg-gray-800 dark:data-[state=open]:text-gray-400", closeBtnClassName), children: [_jsx(X, { className: "h-5 w-5" }), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));
 });
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 const DialogHeader = ({ className, ...props }) => (_jsx("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props }));

package/dist/esm/global-account/react/hooks/index.d.ts

@@ -1,6 +1,7 @@
 export { useAccountAssets } from "./useAccountAssets";
 export { useAccountWallet } from "./useAccountWallet";
 export { useAddTWSessionKey } from "./useAddTWSessionKey";
+export { useAnalytics } from "./useAnalytics";
 export { useAuthentication } from "./useAuthentication";
 export { useB3BalanceFromAddresses } from "./useB3BalanceFromAddresses";
 export { useB3EnsName } from "./useB3EnsName";
@@ -24,6 +25,7 @@ export { useQueryBSMNT } from "./useQueryBSMNT";
 export { useRemoveSessionKey } from "./useRemoveSessionKey";
 export { useRouter } from "./useRouter";
 export { useSearchParamsSSR } from "./useSearchParamsSSR";
+export { useSimBalance } from "./useSimBalance";
 export { useSiwe } from "./useSiwe";
 export { useTokenBalance } from "./useTokenBalance";
 export { useTokenBalancesByChain } from "./useTokenBalancesByChain";

package/dist/esm/global-account/react/hooks/index.js

@@ -1,6 +1,7 @@
 export { useAccountAssets } from "./useAccountAssets.js";
 export { useAccountWallet } from "./useAccountWallet.js";
 export { useAddTWSessionKey } from "./useAddTWSessionKey.js";
+export { useAnalytics } from "./useAnalytics.js";
 export { useAuthentication } from "./useAuthentication.js";
 export { useB3BalanceFromAddresses } from "./useB3BalanceFromAddresses.js";
 export { useB3EnsName } from "./useB3EnsName.js";
@@ -24,6 +25,7 @@ export { useQueryBSMNT } from "./useQueryBSMNT.js";
 export { useRemoveSessionKey } from "./useRemoveSessionKey.js";
 export { useRouter } from "./useRouter.js";
 export { useSearchParamsSSR } from "./useSearchParamsSSR.js";
+export { useSimBalance } from "./useSimBalance.js";
 export { useSiwe } from "./useSiwe.js";
 export { useTokenBalance } from "./useTokenBalance.js";
 export { useTokenBalancesByChain } from "./useTokenBalancesByChain.js";

package/dist/esm/global-account/react/hooks/useAnalytics.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Analytics hook that provides sendAnalyticsEvent function
+ * Automatically includes user address from useAccountWallet
+ */
+export declare function useAnalytics(): {
+    sendAnalyticsEvent: (eventName: string, parameters?: Record<string, any>) => void;
+};