@b3dotfun/sdk 0.0.30-alpha.1 → 0.0.30-alpha.10

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

@@ -1,5 +1,5 @@
 export declare function ChainTokenIcon({ chainUrl, tokenUrl, className, }: {
     chainUrl: string;
-    tokenUrl: string;
+    tokenUrl?: string;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ChainTokenIcon = ChainTokenIcon;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
 function ChainTokenIcon({ chainUrl, tokenUrl, className = "", }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: `relative ${className}`, children: [(0, jsx_runtime_1.jsx)("img", { src: tokenUrl, alt: "Token", className: "h-full w-full rounded-full" }), (0, jsx_runtime_1.jsx)("div", { className: "bg-as-on-surface-1 border-as-stroke absolute bottom-0 right-0 h-[45%] w-[45%] rounded border", children: (0, jsx_runtime_1.jsx)("img", { src: chainUrl, alt: "Chain", className: "h-full w-full rounded" }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `relative ${className}`, children: [tokenUrl ? ((0, jsx_runtime_1.jsx)("img", { src: tokenUrl, alt: "Token", className: "h-full w-full rounded-full" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.HelpCircle, { className: "text-b3-react-foreground h-full w-full" })), (0, jsx_runtime_1.jsx)("div", { className: "bg-as-on-surface-1 border-as-stroke absolute bottom-0 right-0 h-[45%] w-[45%] rounded border", children: (0, jsx_runtime_1.jsx)("img", { src: chainUrl, alt: "Chain", className: "h-full w-full rounded" }) })] }));
 }

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

@@ -7,8 +7,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("../../../../global-account/react");
 const cn_1 = require("../../../../shared/utils/cn");
 const formatAddress_1 = require("../../../../shared/utils/formatAddress");
+const react_2 = require("@web3icons/react");
 const lucide_react_1 = require("lucide-react");
-const react_2 = require("react");
+const react_3 = require("react");
 const react_dom_1 = require("react-dom");
 const sonner_1 = require("sonner");
 const wagmi_1 = require("wagmi");
@@ -24,43 +25,43 @@ function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod,
     const { connect, connectors, isPending } = (0, wagmi_1.useConnect)();
     const { disconnect } = (0, wagmi_1.useDisconnect)();
     const { data: walletClient } = (0, wagmi_1.useWalletClient)();
-    const [showWalletModal, setShowWalletModal] = (0, react_2.useState)(false);
+    const [showWalletModal, setShowWalletModal] = (0, react_3.useState)(false);
     // Define available wallet connectors
-    const availableConnectors = connectors.filter(connector => ["MetaMask", "WalletConnect", "Coinbase Wallet", "Rainbow"].includes(connector.name));
+    const availableConnectors = connectors.filter(connector => ["MetaMask", "WalletConnect", "Coinbase Wallet", "Rainbow", "Phantom"].includes(connector.name));
     // Define wallet options with icons and info
     const walletOptions = [
         {
             id: "metamask",
             name: "MetaMask",
-            icon: "🦊",
+            icon: (0, jsx_runtime_1.jsx)(react_2.WalletMetamask, { size: 48 }),
             description: "Connect using MetaMask browser extension",
             connector: availableConnectors.find(c => c.name === "MetaMask"),
         },
         {
             id: "coinbase",
             name: "Coinbase Wallet",
-            icon: "🔵",
+            icon: (0, jsx_runtime_1.jsx)(react_2.WalletCoinbase, { size: 48 }),
             description: "Connect using Coinbase Wallet",
             connector: availableConnectors.find(c => c.name === "Coinbase Wallet"),
         },
         {
             id: "rainbow",
             name: "Rainbow",
-            icon: "🌈",
+            icon: (0, jsx_runtime_1.jsx)(react_2.WalletRainbow, { size: 48 }),
             description: "Connect using Rainbow wallet",
             connector: availableConnectors.find(c => c.name === "Rainbow"),
         },
         {
             id: "walletconnect",
             name: "WalletConnect",
-            icon: "🔗",
+            icon: (0, jsx_runtime_1.jsx)(react_2.WalletWalletConnect, { size: 48 }),
             description: "Connect using WalletConnect protocol",
             connector: availableConnectors.find(c => c.name === "WalletConnect"),
         },
         {
             id: "phantom",
             name: "Phantom",
-            icon: "https://phantom.app/favicon.ico",
+            icon: (0, jsx_runtime_1.jsx)(react_2.WalletPhantom, { size: 48 }),
             description: "Connect using Phantom wallet",
             connector: availableConnectors.find(c => c.name === "Phantom"),
         },
@@ -146,6 +147,6 @@ function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod,
                                                 await requestWalletPermissions(walletOption.connector);
                                             }, disabled: isPending, className: `wallet-option w-full rounded-xl border p-4 text-left transition-all hover:shadow-md disabled:opacity-50 ${isCurrentWallet
                                                 ? "wallet-option--active border-blue-500 bg-blue-50 dark:bg-blue-900/20"
-                                                : "border-gray-200 bg-white hover:border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:hover:border-gray-500"}`, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: `flex h-12 w-12 items-center justify-center rounded-xl text-xl ${isCurrentWallet ? "bg-blue-100 dark:bg-blue-800" : "bg-gray-100 dark:bg-gray-700"}`, children: walletOption.icon }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: walletOption.name }), isCurrentWallet && ((0, jsx_runtime_1.jsx)("span", { className: "rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-800 dark:text-blue-200", children: "Connected" }))] }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-gray-500 dark:text-gray-400", children: isCurrentWallet ? "Switch account or reconnect" : walletOption.description })] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "h-5 w-5 text-gray-400" })] }) }, walletOption.id));
+                                                : "border-gray-200 bg-white hover:border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:hover:border-gray-500"}`, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [walletOption.icon, (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "wallet-option-name flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: walletOption.name }), isCurrentWallet && ((0, jsx_runtime_1.jsx)("span", { className: "rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-800 dark:text-blue-200", children: "Connected" }))] }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-gray-500 dark:text-gray-400", children: isCurrentWallet ? "Switch account or reconnect" : walletOption.description })] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "h-5 w-5 text-gray-400" })] }) }, walletOption.id));
                                     }) }) })] }) }), typeof window !== "undefined" ? document.getElementById("b3-root") || document.body : document.body)] }));
 }

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

@@ -401,7 +401,7 @@ exports.OrderDetails = (0, react_5.memo)(function OrderDetails({ mode = "modal",
                                                     : `Received ${(0, number_1.formatTokenAmount)(BigInt(dTx.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: dTx, isProcessing: false }, dTx.txHash)))
                                             : null, refundTxs
                                             ? refundTxs.map(rTx => ((0, jsx_runtime_1.jsx)(TransactionDetails, { title: `Refunded ${(0, number_1.formatTokenAmount)(BigInt(rTx.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: rTx, isProcessing: false }, rTx.txHash)))
-                                            : null] }) })] }) }), order.errorDetails && ((0, jsx_runtime_1.jsx)("div", { className: "flex justify-center", children: (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/50 text-center text-sm", style: { maxWidth: "40ch" }, children: (0, anyspend_1.getErrorDisplay)(order.errorDetails) }) })), (0, jsx_runtime_1.jsx)("button", { className: "bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white", onClick: mode === "page" ? handleBack : handleCloseModal, children: mode === "page" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Return to Home ", (0, jsx_runtime_1.jsx)(lucide_react_1.Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") })] }));
+                                            : null] }) })] }) }), order.errorDetails && ((0, jsx_runtime_1.jsx)("div", { className: "flex justify-center", children: (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/50 text-center text-sm", style: { maxWidth: "40ch" }, children: (0, anyspend_1.getErrorDisplay)(order.errorDetails) }) })), (0, jsx_runtime_1.jsx)("button", { className: "order-close-button bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white", onClick: mode === "page" ? handleBack : handleCloseModal, children: mode === "page" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Return to Home ", (0, jsx_runtime_1.jsx)(lucide_react_1.Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") })] }));
     }
     if (executeTx) {
         return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OrderDetailsCollapsible_1.OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount }), (0, jsx_runtime_1.jsx)(Accordion_1.Accordion, { type: "single", collapsible: true, className: "w-full", children: (0, jsx_runtime_1.jsxs)(Accordion_1.AccordionItem, { value: "execute-details", children: [(0, jsx_runtime_1.jsx)(Accordion_1.AccordionTrigger, { children: "Transaction Details" }), (0, jsx_runtime_1.jsx)(Accordion_1.AccordionContent, { children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full flex-col gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2", children: (0, jsx_runtime_1.jsx)(react_4.motion.div, { className: "bg-as-border-primary absolute left-[2px] top-0 z-10 w-[3px]", initial: { height: "0%" }, animate: { height: "100%" }, transition: { duration: 1.5, ease: "easeInOut" } }) }), depositTxs
@@ -416,14 +416,14 @@ exports.OrderDetails = (0, react_5.memo)(function OrderDetails({ mode = "modal",
                                                         ? "Joined Tournament"
                                                         : order.type === "fund_tournament"
                                                             ? "Funded Tournament"
-                                                            : "Processed Order", chainId: order.dstChain, tx: executeTx, isProcessing: false, delay: 1 })] }) })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex w-full flex-col gap-8", children: (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "link", asChild: true, children: (0, jsx_runtime_1.jsxs)("a", { href: (0, anyspend_1.getExplorerTxUrl)(order.dstChain, executeTx.txHash), target: "_blank", className: "text-as-primary/70 hover:text-as-primary", style: { whiteSpace: "normal" }, children: [getOrderSuccessText({
+                                                            : "Processed Order", chainId: order.dstChain, tx: executeTx, isProcessing: false, delay: 1 })] }) })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex w-full flex-col gap-8", children: (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "link", asChild: true, children: (0, jsx_runtime_1.jsxs)("a", { href: (0, anyspend_1.getExplorerTxUrl)(order.dstChain, executeTx.txHash), target: "_blank", className: "order-success-text text-as-primary/70 hover:text-as-primary", style: { whiteSpace: "normal" }, children: [getOrderSuccessText({
                                     order,
                                     tournament,
                                     formattedActualDstAmount: formattedActualDstAmount,
                                     dstToken,
                                     recipientName,
                                     centerTruncate: centerTruncate_1.default,
-                                }), (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { className: "ml-2 h-4 w-4" })] }) }) }), order.type === "join_tournament" && order.status === "executed" && ((0, jsx_runtime_1.jsxs)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-full items-center gap-2", disabled: txLoading || isSwitchingOrExecuting, onClick: handleCloseModal, children: [(0, jsx_runtime_1.jsx)("span", { className: "pl-4", children: "Continue to Tournament" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })), order.status === "executed" && ((0, jsx_runtime_1.jsx)("button", { className: "bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white", onClick: mode === "page" ? handleBack : handleCloseModal, children: mode === "page" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Return to Home ", (0, jsx_runtime_1.jsx)(lucide_react_1.Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") }))] }));
+                                }), (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { className: "ml-2 h-4 w-4" })] }) }) }), order.type === "join_tournament" && order.status === "executed" && ((0, jsx_runtime_1.jsxs)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-full items-center gap-2", disabled: txLoading || isSwitchingOrExecuting, onClick: handleCloseModal, children: [(0, jsx_runtime_1.jsx)("span", { className: "pl-4", children: "Continue to Tournament" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })), order.status === "executed" && ((0, jsx_runtime_1.jsx)("button", { className: "order-close-button bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white", onClick: mode === "page" ? handleBack : handleCloseModal, children: mode === "page" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Return to Home ", (0, jsx_runtime_1.jsx)(lucide_react_1.Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") }))] }));
     }
     if (relayTx && relayTx.status === "success") {
         return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OrderDetailsCollapsible_1.OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount }), (0, jsx_runtime_1.jsx)(Accordion_1.Accordion, { type: "single", collapsible: true, className: "w-full", children: (0, jsx_runtime_1.jsxs)(Accordion_1.AccordionItem, { value: "more-details", children: [(0, jsx_runtime_1.jsx)(Accordion_1.AccordionTrigger, { children: "More Details" }), (0, jsx_runtime_1.jsx)(Accordion_1.AccordionContent, { children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full flex-col gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2", children: (0, jsx_runtime_1.jsx)(react_4.motion.div, { className: "bg-as-border-primary absolute left-[2px] top-0 z-10 w-[3px]", initial: { height: "0%" }, animate: { height: "100%" }, transition: { duration: 1.5, ease: "easeInOut" } }) }), depositTxs
@@ -446,14 +446,14 @@ exports.OrderDetails = (0, react_5.memo)(function OrderDetails({ mode = "modal",
                                                                 ? "Joining Tournament"
                                                                 : order.type === "fund_tournament"
                                                                     ? "Funding Tournament"
-                                                                    : "Processing Bridge", chainId: order.dstChain, isProcessing: true, tx: executeTx, delay: 1 })] }))] }) })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex w-full flex-col gap-8", children: (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "link", asChild: true, children: (0, jsx_runtime_1.jsxs)("a", { href: (0, anyspend_1.getExplorerTxUrl)(order.dstChain, relayTx.txHash), target: "_blank", className: "text-as-primary/70 hover:text-as-primary", style: { whiteSpace: "normal" }, children: [getOrderSuccessText({
+                                                                    : "Processing Bridge", chainId: order.dstChain, isProcessing: true, tx: executeTx, delay: 1 })] }))] }) })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex w-full flex-col gap-8", children: (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "link", asChild: true, children: (0, jsx_runtime_1.jsxs)("a", { href: (0, anyspend_1.getExplorerTxUrl)(order.dstChain, relayTx.txHash), target: "_blank", className: "order-success-text text-as-primary/70 hover:text-as-primary", style: { whiteSpace: "normal" }, children: [getOrderSuccessText({
                                     order,
                                     tournament,
                                     formattedActualDstAmount,
                                     dstToken,
                                     recipientName,
                                     centerTruncate: centerTruncate_1.default,
-                                }), (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { className: "ml-2 h-4 w-4" })] }) }) }), order.type === "join_tournament" && order.status === "executed" && ((0, jsx_runtime_1.jsxs)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-full items-center gap-2", disabled: txLoading || isSwitchingOrExecuting, onClick: handleCloseModal, children: [(0, jsx_runtime_1.jsx)("span", { className: "pl-4", children: "Continue to Tournament" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })), order.status === "executed" && ((0, jsx_runtime_1.jsx)("button", { className: "bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white", onClick: mode === "page" ? handleBack : handleCloseModal, children: mode === "page" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Return to Home ", (0, jsx_runtime_1.jsx)(lucide_react_1.Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") }))] }));
+                                }), (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { className: "ml-2 h-4 w-4" })] }) }) }), order.type === "join_tournament" && order.status === "executed" && ((0, jsx_runtime_1.jsxs)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-full items-center gap-2", disabled: txLoading || isSwitchingOrExecuting, onClick: handleCloseModal, children: [(0, jsx_runtime_1.jsx)("span", { className: "pl-4", children: "Continue to Tournament" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })), order.status === "executed" && ((0, jsx_runtime_1.jsx)("button", { className: "order-close-button bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white", onClick: mode === "page" ? handleBack : handleCloseModal, children: mode === "page" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Return to Home ", (0, jsx_runtime_1.jsx)(lucide_react_1.Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") }))] }));
     }
     // This boolean indicates that user finish payment, and waiting for the deposit to be confirmed. We get this from query params (waitingForDeposit=true)
     const waitingForDeposit = new URLSearchParams(window.location.search).get("waitingForDeposit") === "true";

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

@@ -20,7 +20,6 @@ function B3DynamicModal() {
     const { isOpen, setB3ModalOpen, contentType, history, navigateBack } = (0, react_2.useModalStore)();
     const { theme } = (0, useB3_1.useB3)();
     const isMobile = (0, react_2.useIsMobile)();
-    let hideCloseButton = false;
     // Define arrays for different modal type groups
     const fullWidthTypes = [
         "anySpend",
@@ -46,9 +45,7 @@ function B3DynamicModal() {
     ];
     // Check if current content type is in freestyle types
     const isFreestyleType = freestyleTypes.includes(contentType?.type);
-    if (isFreestyleType) {
-        hideCloseButton = true;
-    }
+    const hideCloseButton = isFreestyleType;
     // Build content class using cn utility
     // eslint-disable-next-line tailwindcss/no-custom-classname
     const contentClass = (0, cn_1.cn)("b3-modal", theme === "dark" && "dark", fullWidthTypes.includes(contentType?.type) && "w-full", isFreestyleType && "b3-modal-freestyle", contentType?.type === "signInWithB3" && "p-0", contentType?.type === "anySpend" && "md:px-6", contentType?.type === "transak" && "transak-modal");
@@ -98,5 +95,5 @@ function B3DynamicModal() {
     const ModalContent = isMobile ? drawer_1.DrawerContent : dialog_1.DialogContent;
     const ModalTitle = isMobile ? drawer_1.DrawerTitle : dialog_1.DialogTitle;
     const ModalDescription = isMobile ? drawer_1.DrawerDescription : dialog_1.DialogDescription;
-    return ((0, jsx_runtime_1.jsx)(ModalComponent, { open: isOpen, onOpenChange: setB3ModalOpen, children: (0, jsx_runtime_1.jsxs)(ModalContent, { className: (0, cn_1.cn)(contentClass, "rounded-2xl bg-white shadow-xl dark:bg-gray-900", "border border-gray-200 dark:border-gray-800", "mx-auto w-full max-w-md", "sm:max-w-lg"), hideCloseButton: hideCloseButton, children: [(0, jsx_runtime_1.jsx)(ModalTitle, { className: "sr-only hidden", children: contentType?.type || "Modal" }), (0, jsx_runtime_1.jsx)(ModalDescription, { className: "sr-only hidden", children: contentType?.type || "Modal Body" }), (0, jsx_runtime_1.jsxs)("div", { className: "no-scrollbar max-h-[90dvh] overflow-auto sm:max-h-[80dvh]", children: [history.length > 0 && contentType?.showBackButton && ((0, jsx_runtime_1.jsxs)("button", { onClick: navigateBack, className: "flex items-center gap-2 px-6 py-4 text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-white", children: [(0, jsx_runtime_1.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M15.8337 10H4.16699", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.0003 15.8334L4.16699 10L10.0003 4.16669", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium", children: "Back" })] })), renderContent()] })] }) }));
+    return ((0, jsx_runtime_1.jsx)(ModalComponent, { open: isOpen, onOpenChange: setB3ModalOpen, children: (0, jsx_runtime_1.jsxs)(ModalContent, { className: (0, cn_1.cn)(contentClass, "rounded-2xl bg-white shadow-xl dark:bg-gray-900", "border border-gray-200 dark:border-gray-800", "mx-auto w-full max-w-md", "sm:max-w-lg sm:rounded-b-none"), hideCloseButton: hideCloseButton, children: [(0, jsx_runtime_1.jsx)(ModalTitle, { className: "sr-only hidden", children: contentType?.type || "Modal" }), (0, jsx_runtime_1.jsx)(ModalDescription, { className: "sr-only hidden", children: contentType?.type || "Modal Body" }), (0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("no-scrollbar max-h-[90dvh] overflow-auto sm:max-h-[80dvh]", contentType?.type === "manageAccount" && "h-[90dvh]"), children: [history.length > 0 && contentType?.showBackButton && ((0, jsx_runtime_1.jsxs)("button", { onClick: navigateBack, className: "flex items-center gap-2 px-6 py-4 text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-white", children: [(0, jsx_runtime_1.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M15.8337 10H4.16699", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.0003 15.8334L4.16699 10L10.0003 4.16669", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium", children: "Back" })] })), renderContent()] })] }) }));
 }

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

@@ -5,6 +5,7 @@ exports.B3Provider = B3Provider;
 exports.InnerProvider = InnerProvider;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("../../../../global-account/react");
+const analytics_1 = require("../../../../global-account/utils/analytics");
 const supported_1 = require("../../../../shared/constants/chains/supported");
 const react_query_1 = require("@tanstack/react-query");
 const react_2 = require("react");
@@ -33,6 +34,10 @@ const queryClient = new react_query_1.QueryClient();
  * Main B3Provider component
  */
 function B3Provider({ theme = "light", children, accountOverride, environment, automaticallySetFirstEoa, simDuneApiKey, toaster, }) {
+    // Initialize Google Analytics on mount
+    (0, react_2.useEffect)(() => {
+        (0, analytics_1.loadGA4Script)();
+    }, []);
     return ((0, jsx_runtime_1.jsx)(wagmi_1.WagmiProvider, { config: exports.wagmiConfig, children: (0, jsx_runtime_1.jsx)(react_query_1.QueryClientProvider, { client: queryClient, children: (0, jsx_runtime_1.jsx)(react_3.ThirdwebProvider, { children: (0, jsx_runtime_1.jsx)(react_1.TooltipProvider, { children: (0, jsx_runtime_1.jsx)(InnerProvider, { accountOverride: accountOverride, environment: environment, theme: theme, automaticallySetFirstEoa: !!automaticallySetFirstEoa, children: (0, jsx_runtime_1.jsxs)(react_1.RelayKitProviderWrapper, { simDuneApiKey: simDuneApiKey, children: [children, (0, jsx_runtime_1.jsx)(StyleRoot_1.StyleRoot, { id: "b3-root" }), (0, jsx_runtime_1.jsx)(sonner_1.Toaster, { theme: theme, position: toaster?.position, style: toaster?.style })] }) }) }) }) }) }));
 }
 /**

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

@@ -20,6 +20,7 @@ const AUTH_METHODS = [
     { id: "x", label: "X (Twitter)", enabled: true },
     { id: "discord", label: "Discord", enabled: true },
     { id: "apple", label: "Apple", enabled: true },
+    { id: "farcaster", label: "Farcaster", enabled: true },
 ];
 function LinkAccount({ onSuccess: onSuccessCallback, onError, onClose, chain, partnerId, }) {
     const { isLinking, linkingMethod, setLinkingState, navigateBack, setB3ModalContentType } = (0, useModalStore_1.useModalStore)();

package/dist/cjs/global-account/react/components/ManageAccount/ContentTokens.d.ts

@@ -0,0 +1,14 @@
+interface ContentTokensProps {
+    activeTab: string;
+}
+/**
+ * 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 declare function ContentTokens({ activeTab }: ContentTokensProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,267 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentTokens = ContentTokens;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const anyspend_1 = require("../../../../anyspend");
+const ChainTokenIcon_1 = require("../../../../anyspend/react/components/common/ChainTokenIcon");
+const react_1 = require("../../../../global-account/react");
+const number_1 = require("../../../../shared/utils/number");
+const lucide_react_1 = require("lucide-react");
+const react_2 = require("react");
+const react_number_format_1 = require("react-number-format");
+const sonner_1 = require("sonner");
+const react_3 = require("thirdweb/react");
+const viem_1 = require("viem");
+// 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)
+ */
+function ContentTokens({ activeTab }) {
+    // === TOKEN FILTERING STATE ===
+    const [showAllTokens, setShowAllTokens] = (0, react_2.useState)(false);
+    // === NAVIGATION STATE ===
+    const [tokenPanelView, setTokenPanelView] = (0, react_2.useState)(TokenPanelView.LIST);
+    // === SEND FORM STATE ===
+    const [selectedToken, setSelectedToken] = (0, react_2.useState)(null);
+    const [recipientAddress, setRecipientAddress] = (0, react_2.useState)("");
+    const [sendAmount, setSendAmount] = (0, react_2.useState)("");
+    const [isSending, setIsSending] = (0, react_2.useState)(false);
+    const [addressError, setAddressError] = (0, react_2.useState)("");
+    // === ANIMATION STATE ===
+    // CRITICAL: useRef for animation direction prevents component remounting
+    // This ensures input focus is preserved during panel transitions
+    const animationDirection = (0, react_2.useRef)(null);
+    // === DATA FETCHING ===
+    const account = (0, react_3.useActiveAccount)();
+    const { data: simBalance, refetch: refetchSimBalance, isLoading: isLoadingBalance } = (0, react_1.useSimBalance)(account?.address);
+    // === BLOCKCHAIN INTERACTION ===
+    const { switchChainAndExecute } = (0, react_1.useUnifiedChainSwitchAndExecute)();
+    // === ANALYTICS ===
+    const { sendAnalyticsEvent } = (0, react_1.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 && !(0, viem_1.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
+    (0, react_2.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 = (0, number_1.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 = (0, viem_1.parseUnits)(sendAmount, displayToken.decimals);
+            // Prepare analytics event data
+            const analyticsData = {
+                amount: sendAmount,
+                symbol: displayToken.symbol,
+                chain_id: displayToken.chain_id,
+                address: displayToken.address,
+            };
+            try {
+                const sendTokenData = (0, viem_1.encodeFunctionData)({
+                    abi: viem_1.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: (0, anyspend_1.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
+                sonner_1.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 ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center justify-center py-12 text-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-b3-line/50 mb-4 rounded-full p-4", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "text-b3-foreground-muted h-8 w-8 animate-spin" }) }), (0, jsx_runtime_1.jsx)("h3", { className: "text-b3-grey font-neue-montreal-semibold mb-2", children: "Loading token data..." }), (0, jsx_runtime_1.jsx)("p", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "Please wait while we fetch the latest information" })] }));
+        }
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)(react_1.Button, { variant: "ghost", size: "icon", onClick: () => {
+                                animationDirection.current = "back";
+                                setTokenPanelView(TokenPanelView.LIST);
+                            }, className: "hover:bg-b3-line/60", disabled: isSending, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowLeft, { className: "h-5 w-5" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-8 w-8 items-center justify-center", children: anyspend_1.ALL_CHAINS[displayToken.chain_id]?.logoUrl ? ((0, jsx_runtime_1.jsx)(ChainTokenIcon_1.ChainTokenIcon, { chainUrl: anyspend_1.ALL_CHAINS[displayToken.chain_id].logoUrl, tokenUrl: displayToken.token_metadata?.logo, className: "size-8" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.CircleHelp, { className: "text-b3-react-foreground size-8" })) }), (0, jsx_runtime_1.jsxs)("h2", { className: "text-b3-grey font-neue-montreal-semibold text-lg", children: ["Send ", displayToken.symbol] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [(0, jsx_runtime_1.jsx)("label", { className: "text-b3-grey font-neue-montreal-medium text-sm", children: "Recipient Address" }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-1", children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.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 }), (0, jsx_runtime_1.jsx)(react_1.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: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "h-4 w-4" }) })] }), addressError && (0, jsx_runtime_1.jsx)("p", { className: "font-neue-montreal-medium text-xs text-red-500", children: addressError })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [(0, jsx_runtime_1.jsx)("label", { className: "text-b3-grey font-neue-montreal-medium text-sm", children: "Amount" }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-3", children: [(0, jsx_runtime_1.jsx)(react_number_format_1.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) }), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-4 gap-2", children: [25, 50, 75, 100].map(percentage => ((0, jsx_runtime_1.jsxs)(react_1.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))) }), (0, jsx_runtime_1.jsxs)("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: ["Available: ", (0, number_1.formatTokenAmount)(BigInt(displayToken.amount), displayToken.decimals), " ", displayToken.symbol] })] })] }), (0, jsx_runtime_1.jsx)(react_1.Button, { onClick: handleSend, disabled: !recipientAddress ||
+                        !sendAmount ||
+                        parseFloat(sendAmount) <= 0 ||
+                        isSending ||
+                        !!addressError ||
+                        !(0, viem_1.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 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), "Sending..."] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Send, { className: "mr-2 h-4 w-4" }), "Send ", displayToken.symbol] })) })] }));
+    };
+    // Skeleton loading component for token list
+    const LoadingIndicator = () => ((0, jsx_runtime_1.jsx)("div", { className: "space-y-4", children: (0, jsx_runtime_1.jsx)("div", { className: "space-y-1", children: [...Array(3)].map((_, index) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between rounded-xl p-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-b3-line h-10 w-10 animate-pulse rounded-full" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-b3-line mb-1 h-4 w-16 animate-pulse rounded" }), (0, jsx_runtime_1.jsx)("div", { className: "bg-b3-line h-3 w-24 animate-pulse rounded" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "text-right", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-b3-line mb-1 h-4 w-20 animate-pulse rounded" }), (0, jsx_runtime_1.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 (0, jsx_runtime_1.jsx)(LoadingIndicator, {});
+        }
+        // Show empty state when no account or no balance data
+        if (!account?.address || !simBalance) {
+            return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center justify-center py-12 text-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-b3-line/50 mb-4 rounded-full p-4", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "text-b3-foreground-muted h-8 w-8" }) }), (0, jsx_runtime_1.jsx)("h3", { className: "text-b3-grey font-neue-montreal-semibold mb-2", children: "No wallet connected" }), (0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center justify-center py-12 text-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-b3-line/50 mb-4 rounded-full p-4", children: (0, jsx_runtime_1.jsx)(lucide_react_1.CircleHelp, { className: "text-b3-foreground-muted h-8 w-8" }) }), (0, jsx_runtime_1.jsx)("h3", { className: "text-b3-grey font-neue-montreal-semibold mb-2", children: "No tokens found" }), (0, jsx_runtime_1.jsx)("p", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "No token balances found in your wallet." })] }));
+        }
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "space-y-1", children: tokensToShow.map(token => ((0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-10 w-10 items-center justify-center rounded-full", children: anyspend_1.ALL_CHAINS[token.chain_id]?.logoUrl ? ((0, jsx_runtime_1.jsx)(ChainTokenIcon_1.ChainTokenIcon, { chainUrl: anyspend_1.ALL_CHAINS[token.chain_id].logoUrl, tokenUrl: token.token_metadata?.logo, className: "size-10" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.CircleHelp, { className: "text-b3-react-foreground size-10" })) }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2", children: (0, jsx_runtime_1.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 }) }), (0, jsx_runtime_1.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 })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "text-right", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-b3-grey font-neue-montreal-semibold transition-colors duration-200 group-hover:font-bold group-hover:text-black", children: (0, number_1.formatTokenAmount)(BigInt(token.amount), token.decimals) }), (0, jsx_runtime_1.jsx)("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm transition-colors duration-200 group-hover:text-gray-700", children: (0, number_1.formatDisplayNumber)(token.value_usd, { style: "currency", fractionDigits: 2 }) })] })] }, token.chain_id + "_" + token.address))) }), hasHiddenTokens && !showAllTokens && ((0, jsx_runtime_1.jsx)("div", { className: "flex justify-center", children: (0, jsx_runtime_1.jsx)(react_1.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 = (0, react_2.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 = (0, react_2.useMemo)(() => ({
+        type: "spring",
+        stiffness: 300, // Spring tension
+        damping: 30, // Spring damping
+    }), []);
+    return ((0, jsx_runtime_1.jsx)(react_1.TransitionPanel, { activeIndex: tokenPanelView, className: "min-h-[400px]", custom: animationDirection.current, variants: variants, transition: transition, children: [(0, jsx_runtime_1.jsx)("div", { children: renderTokenListPanel() }, "token-list"), (0, jsx_runtime_1.jsx)("div", { children: renderSendTokenPanel() }, "send-token")] }));
+}