@b3dotfun/sdk 0.0.30 → 0.0.31-alpha.0

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

@@ -395,7 +395,7 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
                                                     : `Received ${formatTokenAmount(BigInt(dTx.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: dTx, isProcessing: false }, dTx.txHash)))
                                             : null, refundTxs
                                             ? refundTxs.map(rTx => (_jsx(TransactionDetails, { title: `Refunded ${formatTokenAmount(BigInt(rTx.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: rTx, isProcessing: false }, rTx.txHash)))
-                                            : null] }) })] }) }), order.errorDetails && (_jsx("div", { className: "flex justify-center", children: _jsx("span", { className: "text-as-primary/50 text-center text-sm", style: { maxWidth: "40ch" }, children: getErrorDisplay(order.errorDetails) }) })), _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" ? (_jsxs(_Fragment, { children: ["Return to Home ", _jsx(Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") })] }));
+                                            : null] }) })] }) }), order.errorDetails && (_jsx("div", { className: "flex justify-center", children: _jsx("span", { className: "text-as-primary/50 text-center text-sm", style: { maxWidth: "40ch" }, children: getErrorDisplay(order.errorDetails) }) })), _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" ? (_jsxs(_Fragment, { children: ["Return to Home ", _jsx(Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") })] }));
     }
     if (executeTx) {
         return (_jsxs(_Fragment, { children: [_jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount }), _jsx(Accordion, { type: "single", collapsible: true, className: "w-full", children: _jsxs(AccordionItem, { value: "execute-details", children: [_jsx(AccordionTrigger, { children: "Transaction Details" }), _jsx(AccordionContent, { children: _jsxs("div", { className: "relative flex w-full flex-col gap-4", children: [_jsx("div", { className: "bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2", children: _jsx(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
@@ -410,14 +410,14 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
                                                         ? "Joined Tournament"
                                                         : order.type === "fund_tournament"
                                                             ? "Funded Tournament"
-                                                            : "Processed Order", chainId: order.dstChain, tx: executeTx, isProcessing: false, delay: 1 })] }) })] }) }), _jsx("div", { className: "flex w-full flex-col gap-8", children: _jsx(Button, { variant: "link", asChild: true, children: _jsxs("a", { href: 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 })] }) })] }) }), _jsx("div", { className: "flex w-full flex-col gap-8", children: _jsx(Button, { variant: "link", asChild: true, children: _jsxs("a", { href: 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,
-                                }), _jsx(ExternalLink, { className: "ml-2 h-4 w-4" })] }) }) }), order.type === "join_tournament" && order.status === "executed" && (_jsxs(ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-full items-center gap-2", disabled: txLoading || isSwitchingOrExecuting, onClick: handleCloseModal, children: [_jsx("span", { className: "pl-4", children: "Continue to Tournament" }), _jsx(ChevronRight, { className: "h-4 w-4" })] })), order.status === "executed" && (_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" ? (_jsxs(_Fragment, { children: ["Return to Home ", _jsx(Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") }))] }));
+                                }), _jsx(ExternalLink, { className: "ml-2 h-4 w-4" })] }) }) }), order.type === "join_tournament" && order.status === "executed" && (_jsxs(ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-full items-center gap-2", disabled: txLoading || isSwitchingOrExecuting, onClick: handleCloseModal, children: [_jsx("span", { className: "pl-4", children: "Continue to Tournament" }), _jsx(ChevronRight, { className: "h-4 w-4" })] })), order.status === "executed" && (_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" ? (_jsxs(_Fragment, { children: ["Return to Home ", _jsx(Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") }))] }));
     }
     if (relayTx && relayTx.status === "success") {
         return (_jsxs(_Fragment, { children: [_jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount }), _jsx(Accordion, { type: "single", collapsible: true, className: "w-full", children: _jsxs(AccordionItem, { value: "more-details", children: [_jsx(AccordionTrigger, { children: "More Details" }), _jsx(AccordionContent, { children: _jsxs("div", { className: "relative flex w-full flex-col gap-4", children: [_jsx("div", { className: "bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2", children: _jsx(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
@@ -440,14 +440,14 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
                                                                 ? "Joining Tournament"
                                                                 : order.type === "fund_tournament"
                                                                     ? "Funding Tournament"
-                                                                    : "Processing Bridge", chainId: order.dstChain, isProcessing: true, tx: executeTx, delay: 1 })] }))] }) })] }) }), _jsx("div", { className: "flex w-full flex-col gap-8", children: _jsx(Button, { variant: "link", asChild: true, children: _jsxs("a", { href: 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 })] }))] }) })] }) }), _jsx("div", { className: "flex w-full flex-col gap-8", children: _jsx(Button, { variant: "link", asChild: true, children: _jsxs("a", { href: 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,
-                                }), _jsx(ExternalLink, { className: "ml-2 h-4 w-4" })] }) }) }), order.type === "join_tournament" && order.status === "executed" && (_jsxs(ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-full items-center gap-2", disabled: txLoading || isSwitchingOrExecuting, onClick: handleCloseModal, children: [_jsx("span", { className: "pl-4", children: "Continue to Tournament" }), _jsx(ChevronRight, { className: "h-4 w-4" })] })), order.status === "executed" && (_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" ? (_jsxs(_Fragment, { children: ["Return to Home ", _jsx(Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") }))] }));
+                                }), _jsx(ExternalLink, { className: "ml-2 h-4 w-4" })] }) }) }), order.type === "join_tournament" && order.status === "executed" && (_jsxs(ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-full items-center gap-2", disabled: txLoading || isSwitchingOrExecuting, onClick: handleCloseModal, children: [_jsx("span", { className: "pl-4", children: "Continue to Tournament" }), _jsx(ChevronRight, { className: "h-4 w-4" })] })), order.status === "executed" && (_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" ? (_jsxs(_Fragment, { children: ["Return to Home ", _jsx(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/esm/anyspend/react/components/common/OrderTokenAmount.js

@@ -43,5 +43,5 @@ export function OrderTokenAmount({ disabled, inputValue, onChangeInput, context,
             onChangeInput("0.01");
         }
     };
-    return (_jsx("div", { className: cn("border-as-stroke flex w-full flex-col gap-2 rounded-xl", className), children: _jsxs("div", { className: cn("flex items-center justify-between gap-3", innerClassName), children: [!canEditAmount ? (_jsx("h2", { className: cn("text-3xl font-medium text-white", amountClassName), children: inputValue || "--" })) : (_jsx(NumericFormat, { decimalSeparator: ".", allowedDecimalSeparators: [","], thousandSeparator: true, inputMode: "decimal", autoComplete: "off", autoCorrect: "off", type: "text", placeholder: "0.00", minLength: 1, maxLength: 30, spellCheck: "false", className: cn("placeholder:text-as-primary/70 disabled:text-as-primary/70 text-as-primary w-full bg-transparent text-4xl font-semibold leading-[42px] outline-none sm:text-[30px]", amountClassName), pattern: "^[0-9]*[.,]?[0-9]*$", disabled: disabled, value: inputValue, allowNegative: false, onChange: e => onChangeInput(e.currentTarget.value) }, `input-${token.address}-${chainId}`)), !hideTokenSelect && (_jsx(TokenSelector, { address: address, chainIdsFilter: Object.values(ALL_CHAINS).map(chain => chain.id), context: context, fromChainWalletVMSupported: true, isValidAddress: true, lockedChainIds: Object.values(ALL_CHAINS).map(chain => chain.id), multiWalletSupportEnabled: true, onAnalyticEvent: undefined, popularChainIds: [1, 8453, RELAY_SOLANA_MAINNET_CHAIN_ID], setToken: handleTokenSelect, supportedWalletVMs: ["evm", "svm"], token: undefined, trigger: _jsxs(Button, { variant: "outline", role: "combobox", className: cn("bg-b3-react-background border-as-stroke flex h-auto w-fit shrink-0 items-center justify-center gap-2 rounded-xl border-2 px-2 py-1 pr-2 text-center", tokenSelectClassName), children: [token.metadata.logoURI ? (_jsx(ChainTokenIcon, { chainUrl: ALL_CHAINS[chainId].logoUrl, tokenUrl: token.metadata.logoURI, className: "h-8 min-h-8 w-8 min-w-8" })) : (_jsx("div", { className: "h-8 w-8 rounded-full bg-gray-700" })), _jsxs("div", { className: "flex flex-col items-start gap-0", children: [_jsx("div", { className: "text-as-primary font-semibold", children: token.symbol }), _jsx("div", { className: "text-as-primary/70 text-xs", children: ALL_CHAINS[chainId].name })] }), _jsx(ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-70" })] }) }, `selector-${context}-${token.address}-${chainId}`))] }) }, `${context}-${token.address}-${chainId}`));
+    return (_jsx("div", { className: cn("border-as-stroke flex w-full flex-col gap-2 rounded-xl", className), children: _jsxs("div", { className: cn("flex items-center justify-between gap-3", innerClassName), children: [!canEditAmount ? (_jsx("h2", { className: cn("text-3xl font-medium text-white", amountClassName), children: inputValue || "--" })) : (_jsx(NumericFormat, { decimalSeparator: ".", allowedDecimalSeparators: [","], thousandSeparator: true, inputMode: "decimal", autoComplete: "off", autoCorrect: "off", type: "text", placeholder: "0.00", minLength: 1, maxLength: 30, spellCheck: "false", className: cn("placeholder:text-as-primary/70 disabled:text-as-primary/70 text-as-primary w-full bg-transparent text-4xl font-semibold leading-[42px] outline-none sm:text-[30px]", amountClassName), pattern: "^[0-9]*[.,]?[0-9]*$", disabled: disabled, value: inputValue, allowNegative: false, onChange: e => onChangeInput(e.currentTarget.value) }, `input-${token.address}-${chainId}`)), !hideTokenSelect && (_jsx(TokenSelector, { address: address, chainIdsFilter: Object.values(ALL_CHAINS).map(chain => chain.id), context: context, fromChainWalletVMSupported: true, isValidAddress: true, lockedChainIds: Object.values(ALL_CHAINS).map(chain => chain.id), multiWalletSupportEnabled: true, onAnalyticEvent: undefined, popularChainIds: [1, 8453, RELAY_SOLANA_MAINNET_CHAIN_ID], setToken: handleTokenSelect, supportedWalletVMs: ["evm", "svm"], token: undefined, trigger: _jsxs(Button, { variant: "outline", role: "combobox", className: cn("token-selector-button bg-b3-react-background border-as-stroke flex h-auto w-fit shrink-0 items-center justify-center gap-2 rounded-xl border-2 px-2 py-1 pr-2 text-center", tokenSelectClassName), children: [token.metadata.logoURI ? (_jsx(ChainTokenIcon, { chainUrl: ALL_CHAINS[chainId].logoUrl, tokenUrl: token.metadata.logoURI, className: "h-8 min-h-8 w-8 min-w-8" })) : (_jsx("div", { className: "h-8 w-8 rounded-full bg-gray-700" })), _jsxs("div", { className: "flex flex-col items-start gap-0", children: [_jsx("div", { className: "text-as-primary font-semibold", children: token.symbol }), _jsx("div", { className: "text-as-primary/70 text-xs", children: ALL_CHAINS[chainId].name })] }), _jsx(ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-70" })] }) }, `selector-${context}-${token.address}-${chainId}`))] }) }, `${context}-${token.address}-${chainId}`));
 }

package/dist/esm/anyspend/react/components/common/PanelOnramp.d.ts

@@ -1,6 +1,6 @@
 import { components } from "../../../../anyspend/types/api";
 import { FiatPaymentMethod } from "./FiatPaymentMethod";
-export declare function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMethod, setActivePanel, _recipientAddress, destinationToken, destinationChainId, destinationAmount, onDestinationTokenChange, onDestinationChainChange, fiatPaymentMethodIndex, }: {
+export declare function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMethod, setActivePanel, _recipientAddress, destinationToken, destinationChainId, destinationAmount, onDestinationTokenChange, onDestinationChainChange, fiatPaymentMethodIndex, recipientSelectionPanelIndex, dstTokenSymbol, hideDstToken, }: {
     srcAmountOnRamp: string;
     setSrcAmountOnRamp: (amount: string) => void;
     selectedPaymentMethod?: FiatPaymentMethod;
@@ -12,4 +12,7 @@ export declare function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selec
     onDestinationTokenChange?: (token: components["schemas"]["Token"]) => void;
     onDestinationChainChange?: (chainId: number) => void;
     fiatPaymentMethodIndex: number;
+    recipientSelectionPanelIndex: number;
+    dstTokenSymbol?: string;
+    hideDstToken?: boolean;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -2,14 +2,14 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useCoinbaseOnrampOptions, useGeoOnrampOptions } from "../../../../anyspend/react/index.js";
 import { ALL_CHAINS } from "../../../../anyspend/utils/chain.js";
 import { Input, useGetGeo, useProfile } from "../../../../global-account/react/index.js";
-import { formatUsername } from "../../../../shared/utils/index.js";
+import { cn, formatUsername } from "../../../../shared/utils/index.js";
 import { formatAddress } from "../../../../shared/utils/formatAddress.js";
 import { ChevronRight, Wallet } from "lucide-react";
 import { useRef } from "react";
 import { toast } from "sonner";
 import { FiatPaymentMethod } from "./FiatPaymentMethod.js";
 import { OrderTokenAmountFiat } from "./OrderTokenAmountFiat.js";
-export function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMethod, setActivePanel, _recipientAddress, destinationToken, destinationChainId, destinationAmount, onDestinationTokenChange, onDestinationChainChange, fiatPaymentMethodIndex, }) {
+export function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMethod, setActivePanel, _recipientAddress, destinationToken, destinationChainId, destinationAmount, onDestinationTokenChange, onDestinationChainChange, fiatPaymentMethodIndex, recipientSelectionPanelIndex, dstTokenSymbol, hideDstToken = false, }) {
     // Get geo-based onramp options to access fee information
     const { stripeWeb2Support } = useGeoOnrampOptions(srcAmountOnRamp);
     // Helper function to get fees from API data
@@ -68,9 +68,9 @@ export function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPayme
     };
     return (_jsxs("div", { className: "panel-onramp bg-as-surface-primary flex w-full flex-col", children: [_jsxs("div", { className: "border-as-border-secondary bg-as-surface-secondary relative flex w-full flex-col rounded-2xl border p-4", children: [_jsxs("div", { className: "flex h-7 w-full items-center justify-between", children: [_jsx("span", { className: "text-as-tertiarry flex items-center text-sm font-bold", children: "Pay" }), _jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm", onClick: () => setActivePanel(fiatPaymentMethodIndex), children: selectedPaymentMethod === FiatPaymentMethod.COINBASE_PAY ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: "C" }) }), "Coinbase Pay"] }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedPaymentMethod === FiatPaymentMethod.STRIPE ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: "S" }) }), "Stripe"] }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] })) })] }), _jsx("div", { className: "flex items-center justify-center pb-2 pt-8", children: _jsxs("div", { className: "flex gap-1", children: [_jsx("span", { className: "text-as-tertiarry text-2xl font-bold", children: "$" }), _jsx(Input, { ref: amountInputRef, type: "text", value: srcAmountOnRamp, onChange: handleAmountChange, placeholder: "5", className: "text-as-primary placeholder:text-as-primary/50 h-auto min-w-[70px] border-0 bg-transparent p-0 px-3 pt-1 text-4xl font-bold focus-visible:ring-0 focus-visible:ring-offset-0", style: {
                                         width: `${Math.max(50, srcAmountOnRamp.length * 34)}px`,
-                                    } })] }) }), _jsx("div", { className: "mx-auto mb-6 inline-grid grid-cols-4 gap-2", children: ["5", "10", "20", "25"].map(value => (_jsxs("button", { onClick: () => handleQuickAmount(value), className: `bg-as-surface-secondary border-as-border-secondary hover:border-as-border-secondary h-7 w-14 rounded-lg border text-sm font-medium transition-all duration-200 ${srcAmountOnRamp === value
+                                    } })] }) }), _jsx("div", { className: cn("mx-auto mb-6 inline-grid grid-cols-4 gap-2", hideDstToken && "mb-0"), children: ["5", "10", "20", "25"].map(value => (_jsxs("button", { onClick: () => handleQuickAmount(value), className: `bg-as-surface-secondary border-as-border-secondary hover:border-as-border-secondary h-7 w-14 rounded-lg border text-sm font-medium transition-all duration-200 ${srcAmountOnRamp === value
                                 ? "border-as-border-secondary bg-as-surface-secondary"
-                                : "bg-as-surface-secondary hover:bg-as-surface-secondary"}`, children: ["$", value] }, value))) }), destinationToken && destinationChainId && (_jsx(OrderTokenAmountFiat, { address: _recipientAddress, context: "to", inputValue: destinationAmount || "0", onChangeInput: () => { }, chainId: destinationChainId, setChainId: onDestinationChainChange || (() => { }), token: destinationToken, setToken: onDestinationTokenChange || (() => { }) }))] }), _jsxs("div", { className: "border-as-border-secondary bg-as-surface-secondary mt-4 flex w-full flex-col gap-3 rounded-xl border p-4", children: [_jsxs("div", { className: "flex w-full items-center justify-between gap-2", children: [_jsx("span", { className: "text-as-tertiarry flex items-center text-sm", children: "Recipient" }), _recipientAddress ? (_jsxs("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(5), children: [_jsx("span", { className: "text-sm", children: recipientName ? formatUsername(recipientName) : formatAddress(_recipientAddress) }), _jsx(ChevronRight, { size: 16 })] })) : (_jsxs("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(5), children: [_jsx(Wallet, { className: "text-as-brand", size: 16 }), "Select recipient", _jsx(ChevronRight, { size: 16 })] }))] }), _jsx("div", { className: "divider w-full" }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-as-tertiarry text-sm", children: "Expected to receive" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-as-primary font-semibold", children: [destinationAmount || "0", " ", destinationToken?.symbol || ""] }), _jsxs("span", { className: "text-as-tertiarry text-sm", children: ["on ", destinationChainId ? ALL_CHAINS[destinationChainId]?.name : ""] }), destinationToken && destinationChainId && destinationToken.metadata?.logoURI && (_jsx("img", { src: ALL_CHAINS[destinationChainId]?.logoUrl, alt: "Chain", className: "h-4 w-4 rounded-full" }))] })] }), _jsx("div", { className: "divider w-full" }), _jsx("div", { className: "", children: _jsx("div", { className: "flex items-center justify-between", children: (() => {
+                                : "bg-as-surface-secondary hover:bg-as-surface-secondary"}`, children: ["$", value] }, value))) }), destinationToken && destinationChainId && !hideDstToken && (_jsx(OrderTokenAmountFiat, { address: _recipientAddress, context: "to", inputValue: destinationAmount || "0", onChangeInput: () => { }, chainId: destinationChainId, setChainId: onDestinationChainChange || (() => { }), token: destinationToken, setToken: onDestinationTokenChange || (() => { }) }))] }), _jsxs("div", { className: "border-as-border-secondary bg-as-surface-secondary mt-4 flex w-full flex-col gap-3 rounded-xl border p-4", children: [_jsxs("div", { className: "flex w-full items-center justify-between gap-2", children: [_jsx("span", { className: "text-as-tertiarry flex items-center text-sm", children: "Recipient" }), _recipientAddress ? (_jsxs("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(recipientSelectionPanelIndex), children: [_jsx("span", { className: "text-sm", children: recipientName ? formatUsername(recipientName) : formatAddress(_recipientAddress) }), _jsx(ChevronRight, { size: 16 })] })) : (_jsxs("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(5), children: [_jsx(Wallet, { className: "text-as-brand", size: 16 }), "Select recipient", _jsx(ChevronRight, { size: 16 })] }))] }), _jsx("div", { className: "divider w-full" }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-as-tertiarry text-sm", children: "Expected to receive" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-as-primary font-semibold", children: [destinationAmount || "0", " ", dstTokenSymbol || destinationToken?.symbol || ""] }), _jsxs("span", { className: "text-as-tertiarry text-sm", children: ["on ", destinationChainId ? ALL_CHAINS[destinationChainId]?.name : ""] }), destinationToken && destinationChainId && destinationToken.metadata?.logoURI && (_jsx("img", { src: ALL_CHAINS[destinationChainId]?.logoUrl, alt: "Chain", className: "h-4 w-4 rounded-full" }))] })] }), _jsx("div", { className: "divider w-full" }), _jsx("div", { className: "", children: _jsx("div", { className: "flex items-center justify-between", children: (() => {
                                 const currentPaymentMethod = selectedPaymentMethod || FiatPaymentMethod.NONE;
                                 const fee = getFeeFromApi(currentPaymentMethod);
                                 return (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-as-tertiarry text-sm", children: fee !== null ? `Total (included $${fee.toFixed(2)} fee)` : "Total" }), _jsxs("span", { className: "text-as-primary font-semibold", children: ["$", getTotalAmount(currentPaymentMethod).toFixed(2)] })] }));

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

@@ -40,7 +40,7 @@ export function PaySection({ paymentType, selectedSrcChainId, setSelectedSrcChai
     useEffect(() => {
         appliedSrcMetadataRef.current = false;
     }, [selectedSrcToken.address, selectedSrcToken.chainId]);
-    return (_jsxs(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Pay" }), paymentType === "crypto" ? (_jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none", onClick: onSelectCryptoPaymentMethod, children: selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (_jsxs(_Fragment, { children: [isConnected ? (_jsx("div", { className: "flex items-center gap-1", children: connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress || "") })) : ("Connect wallet"), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (_jsxs(_Fragment, { children: ["Transfer crypto", _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] })) })) : (_jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors", onClick: onSelectFiatPaymentMethod, children: selectedFiatPaymentMethod === FiatPaymentMethod.COINBASE_PAY ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: "C" }) }), "Coinbase Pay"] }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedFiatPaymentMethod === FiatPaymentMethod.STRIPE ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: "S" }) }), "Credit/Debit Card"] }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] })) }))] }), paymentType === "crypto" ? (_jsxs(_Fragment, { children: [_jsx(OrderTokenAmount, { address: connectedAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
+    return (_jsxs(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "pay-section bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Pay" }), paymentType === "crypto" ? (_jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none", onClick: onSelectCryptoPaymentMethod, children: selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (_jsxs(_Fragment, { children: [isConnected ? (_jsx("div", { className: "flex items-center gap-1", children: connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress || "") })) : ("Connect wallet"), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (_jsxs(_Fragment, { children: ["Transfer crypto", _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] })) })) : (_jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors", onClick: onSelectFiatPaymentMethod, children: selectedFiatPaymentMethod === FiatPaymentMethod.COINBASE_PAY ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: "C" }) }), "Coinbase Pay"] }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedFiatPaymentMethod === FiatPaymentMethod.STRIPE ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: "S" }) }), "Credit/Debit Card"] }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] })) }))] }), paymentType === "crypto" ? (_jsxs(_Fragment, { children: [_jsx(OrderTokenAmount, { address: connectedAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
                             setIsSrcInputDirty(true);
                             setSrcAmount(value);
                         }, chainId: selectedSrcChainId, setChainId: setSelectedSrcChainId, token: selectedSrcToken, setToken: setSelectedSrcToken }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-5 items-center text-sm", children: formatDisplayNumber(anyspendQuote?.data?.currencyIn?.amountUsd, {

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

@@ -17,7 +17,6 @@ export function B3DynamicModal() {
     const { isOpen, setB3ModalOpen, contentType, history, navigateBack } = useModalStore();
     const { theme } = useB3();
     const isMobile = useIsMobile();
-    let hideCloseButton = false;
     // Define arrays for different modal type groups
     const fullWidthTypes = [
         "anySpend",
@@ -43,9 +42,7 @@ export 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 = 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");
@@ -95,5 +92,5 @@ export function B3DynamicModal() {
     const ModalContent = isMobile ? DrawerContent : DialogContent;
     const ModalTitle = isMobile ? DrawerTitle : DialogTitle;
     const ModalDescription = isMobile ? DrawerDescription : DialogDescription;
-    return (_jsx(ModalComponent, { open: isOpen, onOpenChange: setB3ModalOpen, children: _jsxs(ModalContent, { className: 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: [_jsx(ModalTitle, { className: "sr-only hidden", children: contentType?.type || "Modal" }), _jsx(ModalDescription, { className: "sr-only hidden", children: contentType?.type || "Modal Body" }), _jsxs("div", { className: "no-scrollbar max-h-[90dvh] overflow-auto sm:max-h-[80dvh]", children: [history.length > 0 && contentType?.showBackButton && (_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: [_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M15.8337 10H4.16699", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M10.0003 15.8334L4.16699 10L10.0003 4.16669", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }), _jsx("span", { className: "text-sm font-medium", children: "Back" })] })), renderContent()] })] }) }));
+    return (_jsx(ModalComponent, { open: isOpen, onOpenChange: setB3ModalOpen, children: _jsxs(ModalContent, { className: 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: [_jsx(ModalTitle, { className: "sr-only hidden", children: contentType?.type || "Modal" }), _jsx(ModalDescription, { className: "sr-only hidden", children: contentType?.type || "Modal Body" }), _jsxs("div", { className: cn("no-scrollbar max-h-[90dvh] overflow-auto sm:max-h-[80dvh]", contentType?.type === "manageAccount" && "h-[90dvh]"), children: [history.length > 0 && contentType?.showBackButton && (_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: [_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M15.8337 10H4.16699", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M10.0003 15.8334L4.16699 10L10.0003 4.16669", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }), _jsx("span", { className: "text-sm font-medium", children: "Back" })] })), renderContent()] })] }) }));
 }

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { RelayKitProviderWrapper, TooltipProvider, useAuthStore } from "../../../../global-account/react/index.js";
+import { loadGA4Script } from "../../../../global-account/utils/analytics.js";
 import { supportedChains } from "../../../../shared/constants/chains/supported.js";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { useCallback, useEffect, useState } from "react";
@@ -28,6 +29,10 @@ const queryClient = new QueryClient();
  * Main B3Provider component
  */
 export function B3Provider({ theme = "light", children, accountOverride, environment, automaticallySetFirstEoa, simDuneApiKey, toaster, }) {
+    // Initialize Google Analytics on mount
+    useEffect(() => {
+        loadGA4Script();
+    }, []);
     return (_jsx(WagmiProvider, { config: wagmiConfig, children: _jsx(QueryClientProvider, { client: queryClient, children: _jsx(ThirdwebProvider, { children: _jsx(TooltipProvider, { children: _jsx(InnerProvider, { accountOverride: accountOverride, environment: environment, theme: theme, automaticallySetFirstEoa: !!automaticallySetFirstEoa, children: _jsxs(RelayKitProviderWrapper, { simDuneApiKey: simDuneApiKey, children: [children, _jsx(StyleRoot, { id: "b3-root" }), _jsx(Toaster, { theme: theme, position: toaster?.position, style: toaster?.style })] }) }) }) }) }) }));
 }
 /**

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

@@ -17,6 +17,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 },
 ];
 export function LinkAccount({ onSuccess: onSuccessCallback, onError, onClose, chain, partnerId, }) {
     const { isLinking, linkingMethod, setLinkingState, navigateBack, setB3ModalContentType } = useModalStore();

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

@@ -0,0 +1,6 @@
+interface BalanceContentProps {
+    onLogout?: () => void;
+    partnerId: string;
+}
+export declare function BalanceContent({ onLogout, partnerId }: BalanceContentProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, CopyToClipboard, useAuthentication, useB3BalanceFromAddresses, useModalStore, useNativeBalance, useProfile, } from "../../../../global-account/react/index.js";
+import { BankIcon } from "../../../../global-account/react/components/icons/BankIcon.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 { Loader2, Pencil } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { useActiveAccount } from "thirdweb/react";
+import useFirstEOA from "../../hooks/useFirstEOA.js";
+import { B3TokenIcon, EthereumTokenIcon } from "../TokenIcon.js";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../ui/accordion.js";
+import { TokenBalanceRow } from "./TokenBalanceRow.js";
+function centerTruncate(str, length = 4) {
+    if (str.length <= length * 2)
+        return str;
+    return `${str.slice(0, length)}...${str.slice(-length)}`;
+}
+export function BalanceContent({ onLogout, partnerId }) {
+    const account = useActiveAccount();
+    const { address: eoaAddress, info: eoaInfo } = useFirstEOA();
+    const { data: profile } = useProfile({
+        address: eoaAddress || account?.address,
+        fresh: true,
+    });
+    const { setB3ModalOpen, setB3ModalContentType } = useModalStore();
+    const { logout } = useAuthentication(partnerId);
+    const [logoutLoading, setLogoutLoading] = useState(false);
+    const [openAccordions, setOpenAccordions] = useState([]);
+    const hasExpandedRef = useRef(false);
+    console.log("eoaAddress", eoaAddress);
+    console.log("account?.address", account?.address);
+    // Balance data fetching
+    const { data: eoaNativeBalance, isLoading: eoaNativeLoading } = useNativeBalance(eoaAddress);
+    const { data: eoaB3Balance, isLoading: eoaB3Loading } = useB3BalanceFromAddresses(eoaAddress);
+    const { data: b3Balance, isLoading: b3Loading } = useB3BalanceFromAddresses(account?.address);
+    const { data: nativeBalance, isLoading: nativeLoading } = useNativeBalance(account?.address);
+    // Calculate total USD values for comparison
+    const globalAccountTotalUsd = (b3Balance?.balanceUsd || 0) + (nativeBalance?.totalUsd || 0);
+    const eoaTotalUsd = (eoaB3Balance?.balanceUsd || 0) + (eoaNativeBalance?.totalUsd || 0);
+    // Check if both data sets are ready (not loading and have data)
+    const isGlobalDataReady = !b3Loading && !nativeLoading && b3Balance !== undefined && nativeBalance !== undefined;
+    const isEoaDataReady = !eoaAddress || (!eoaB3Loading && !eoaNativeLoading && eoaB3Balance !== undefined && eoaNativeBalance !== undefined);
+    const isBothDataReady = isGlobalDataReady && isEoaDataReady;
+    // Reset expansion flag when component mounts
+    useEffect(() => {
+        hasExpandedRef.current = false;
+        setOpenAccordions([]);
+    }, []);
+    // Auto-expand the appropriate section when data becomes ready
+    useEffect(() => {
+        if (isBothDataReady && !hasExpandedRef.current && eoaAddress && account?.address) {
+            hasExpandedRef.current = true;
+            // Determine which section to expand based on higher balance
+            if (globalAccountTotalUsd === 0 && eoaTotalUsd === 0) {
+                // If both have 0 balance, expand global account by default
+                setOpenAccordions(["global-account"]);
+            }
+            else if (globalAccountTotalUsd >= eoaTotalUsd) {
+                setOpenAccordions(["global-account"]);
+            }
+            else {
+                setOpenAccordions(["eoa-account"]);
+            }
+        }
+    }, [isBothDataReady, globalAccountTotalUsd, eoaTotalUsd, eoaAddress, account?.address]);
+    const onLogoutEnhanced = async () => {
+        setLogoutLoading(true);
+        await logout();
+        onLogout?.();
+        setB3ModalOpen(false);
+        setLogoutLoading(false);
+    };
+    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 || "") }), _jsxs("div", { className: "border-b3-line bg-b3-line/20 hover:bg-b3-line/40 flex w-fit items-center gap-2 rounded-full border px-3 py-1 transition-colors", children: [_jsx("span", { className: "text-b3-foreground-muted font-mono text-xs", children: centerTruncate(account?.address || "", 6) }), _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(Accordion, { type: "multiple", value: openAccordions, onValueChange: setOpenAccordions, className: "space-y-2", children: [_jsxs(AccordionItem, { value: "global-account", className: "border-none", children: [_jsx(AccordionTrigger, { className: "text-b3-grey font-neue-montreal-semibold py-2 hover:no-underline", children: _jsx("span", { children: "Balance" }) }), _jsxs(AccordionContent, { className: "space-y-4", children: [_jsx(TokenBalanceRow, { icon: _jsx(B3TokenIcon, { className: "size-10" }), name: "B3", balance: `${b3Balance?.formattedTotal || "0.00"} B3`, usdValue: b3Balance?.balanceUsdFormatted || "0.00", priceChange: b3Balance?.priceChange24h }), _jsx(TokenBalanceRow, { icon: _jsx(EthereumTokenIcon, { className: "size-10" }), name: "Ethereum", balance: `${nativeBalance?.formattedTotal || "0.00"} ETH`, usdValue: nativeBalance?.formattedTotalUsd || "0.00", priceChange: nativeBalance?.priceChange24h })] })] }), eoaAddress && (_jsxs(AccordionItem, { value: "eoa-account", className: "border-none", children: [_jsx(AccordionTrigger, { className: "text-b3-grey font-neue-montreal-semibold py-2 hover:no-underline", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("span", { children: ["Connected ", eoaInfo?.data?.name || "Wallet"] }), _jsxs("div", { className: "border-b3-line bg-b3-line/20 hover:bg-b3-line/40 flex w-fit items-center gap-2 rounded-full border px-3 py-1 transition-colors", children: [_jsx("span", { className: "text-b3-foreground-muted font-mono text-xs", children: centerTruncate(eoaAddress, 6) }), _jsx(CopyToClipboard, { text: eoaAddress })] })] }) }), _jsxs(AccordionContent, { className: "space-y-4", children: [_jsx(TokenBalanceRow, { icon: _jsx(B3TokenIcon, { className: "size-10" }), name: "B3", balance: `${eoaB3Balance?.formattedTotal || "0.00"} B3`, usdValue: eoaB3Balance?.balanceUsdFormatted || "0.00", priceChange: eoaB3Balance?.priceChange24h }), _jsx(TokenBalanceRow, { icon: _jsx(EthereumTokenIcon, { className: "size-10" }), name: "Ethereum", balance: `${eoaNativeBalance?.formattedTotal || "0.00"} ETH`, usdValue: eoaNativeBalance?.formattedTotalUsd || "0.00", priceChange: eoaNativeBalance?.priceChange24h })] })] }))] }), _jsxs("button", { className: "border-b3-line hover:bg-b3-line relative flex w-full items-center justify-center rounded-2xl border p-4 transition-colors", onClick: onLogoutEnhanced, children: [_jsx("span", { className: "font-neue-montreal-semibold text-b3-grey", children: "Sign out" }), _jsx("div", { className: "absolute right-4", children: logoutLoading ? (_jsx(Loader2, { className: "animate-spin", size: 16 })) : (_jsx(SignOutIcon, { size: 16, className: "text-b3-grey" })) })] })] }));
+}

package/dist/esm/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 {};