@avail-project/widgets 0.0.1

package/dist/nexus-widget/components/swap-asset-selector.js

@@ -0,0 +1,1910 @@
+// biome-ignore-all lint: NexusWidget registry component from shadcn registry.
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatTokenBalance } from "@avail-project/nexus-core/utils";
+import Decimal from "decimal.js";
+import { Check, ChevronDown, ChevronUp, Globe, Info, Loader2, Minus, Search, X, } from "lucide-react";
+import React, { useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { createPortal } from "react-dom";
+import { CHAIN_METADATA, getSdkSwapSupportedChainIds, getShortChainName, isSwapSupportedBySdkChainList, } from "../../common/utils/constant";
+const tabularNums = {
+    fontFeatureSettings: '"tnum"',
+    fontVariantNumeric: "tabular-nums",
+};
+const brand = "var(--foreground-brand)";
+export function deriveTokenOptions(swapBalance, swapSupportedChains) {
+    const tokens = [];
+    for (const asset of swapBalance) {
+        for (const bd of asset.breakdown ?? []) {
+            if (!isSwapSupportedBySdkChainList(bd.chain?.id, swapSupportedChains)) {
+                continue;
+            }
+            if (Number.parseFloat(bd.balance ?? "0") <= 0)
+                continue;
+            const chainMeta = bd.chain?.id ? CHAIN_METADATA[bd.chain.id] : undefined;
+            tokens.push({
+                contractAddress: bd.contractAddress,
+                symbol: bd.symbol ?? asset.symbol,
+                name: bd.symbol ?? asset.symbol,
+                logo: asset.logo ?? "",
+                decimals: bd.decimals ?? asset.decimals ?? 18,
+                balance: bd.balance,
+                balanceInFiat: bd.balanceInFiat != null
+                    ? `$${Number(bd.balanceInFiat).toFixed(2)}`
+                    : "$0.00",
+                chainId: bd.chain?.id,
+                chainName: getShortChainName(bd.chain?.id, chainMeta?.name ?? bd.chain?.name),
+                chainLogo: chainMeta?.logo ?? bd.chain?.logo,
+            });
+        }
+    }
+    const seen = new Map();
+    for (const t of tokens) {
+        seen.set(`${t.contractAddress.toLowerCase()}-${t.chainId}`, t);
+    }
+    return Array.from(seen.values());
+}
+/* ── Radio dot (circular) ── */
+export const RadioDot = ({ selected }) => (_jsx("div", { style: {
+        width: 20,
+        height: 20,
+        borderRadius: "999px",
+        boxSizing: "border-box",
+        border: selected ? "none" : "2px solid #E8E8E7",
+        backgroundColor: selected ? brand : "#FFFFFE",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0,
+    }, children: selected && (_jsx("div", { style: {
+            width: 8,
+            height: 8,
+            borderRadius: "999px",
+            backgroundColor: "#FFFFFE",
+        } })) }));
+const SelectionControl = ({ selected, indeterminate = false, multi, }) => {
+    if (!multi)
+        return _jsx(RadioDot, { selected: selected });
+    const isActive = selected || indeterminate;
+    return (_jsxs("div", { style: {
+            alignItems: "center",
+            backgroundColor: isActive ? brand : "#FFFFFE",
+            border: isActive ? "none" : "1.5px solid #E0E0DE",
+            borderRadius: "5px",
+            boxSizing: "border-box",
+            display: "flex",
+            flexShrink: 0,
+            height: 20,
+            justifyContent: "center",
+            width: 20,
+        }, children: [selected && (_jsx(Check, { style: { color: "#FFFFFE", height: 14, width: 14 } })), !selected && indeterminate && (_jsx(Minus, { style: { color: "#FFFFFE", height: 14, width: 14 } }))] }));
+};
+/* ── Chain logo cluster ── */
+const ChainLogos = ({ tokens }) => {
+    const clusterRef = useRef(null);
+    const closeTimerRef = useRef(null);
+    const [showTooltip, setShowTooltip] = useState(false);
+    const [tooltipRect, setTooltipRect] = useState(null);
+    const uniqueChains = useMemo(() => {
+        const seen = new Set();
+        const out = [];
+        for (const t of tokens) {
+            if (t.chainId && !seen.has(t.chainId)) {
+                const balanceValue = Number(String(t.balance ?? "").replace(/[^0-9.]/g, "") || 0);
+                seen.add(t.chainId);
+                out.push({
+                    id: t.chainId,
+                    logo: t.chainLogo,
+                    name: getShortChainName(t.chainId, t.chainName),
+                    balance: t.balance,
+                    balanceInFiat: t.balanceInFiat,
+                    balanceValue: Number.isNaN(balanceValue) || !Number.isFinite(balanceValue)
+                        ? 0
+                        : balanceValue,
+                    fiatValue: getTokenFiatValue(t),
+                });
+            }
+        }
+        return out.sort((a, b) => {
+            if (a.fiatValue !== b.fiatValue)
+                return b.fiatValue - a.fiatValue;
+            if (a.balanceValue !== b.balanceValue) {
+                return b.balanceValue - a.balanceValue;
+            }
+            return (a.name ?? "").localeCompare(b.name ?? "");
+        });
+    }, [tokens]);
+    const maxShow = 3;
+    const shown = uniqueChains.slice(0, maxShow);
+    const openTooltip = () => {
+        if (closeTimerRef.current) {
+            clearTimeout(closeTimerRef.current);
+            closeTimerRef.current = null;
+        }
+        setTooltipRect(clusterRef.current?.getBoundingClientRect() ?? null);
+        setShowTooltip(true);
+    };
+    const closeTooltip = () => {
+        if (closeTimerRef.current)
+            clearTimeout(closeTimerRef.current);
+        closeTimerRef.current = setTimeout(() => {
+            setShowTooltip(false);
+            closeTimerRef.current = null;
+        }, 120);
+    };
+    useEffect(() => {
+        return () => {
+            if (closeTimerRef.current)
+                clearTimeout(closeTimerRef.current);
+        };
+    }, []);
+    const showTooltipAbove = tooltipRect ? tooltipRect.top > 240 : true;
+    const tooltip = showTooltip && uniqueChains.length > 1 && tooltipRect
+        ? createPortal(_jsxs("div", { onMouseEnter: openTooltip, onMouseLeave: closeTooltip, style: {
+                backgroundColor: "#FFFFFE",
+                border: "1px solid #E8E8E7",
+                borderRadius: 10,
+                boxShadow: "0 8px 24px rgba(22,22,21,0.12)",
+                ...tabularNums,
+                left: Math.min(Math.max(tooltipRect.left - 24, 8), Math.max(8, window.innerWidth - 248)),
+                maxHeight: 220,
+                minWidth: 240,
+                overflowY: "auto",
+                padding: "10px 12px",
+                pointerEvents: "auto",
+                position: "fixed",
+                top: showTooltipAbove
+                    ? tooltipRect.top - 12
+                    : tooltipRect.bottom + 8,
+                transform: showTooltipAbove ? "translateY(-100%)" : "none",
+                zIndex: 2147483647,
+            }, children: [_jsxs("div", { style: {
+                        alignItems: "center",
+                        color: "#848483",
+                        display: "flex",
+                        fontFamily: '"Geist", system-ui, sans-serif',
+                        fontSize: 11,
+                        fontWeight: 700,
+                        justifyContent: "space-between",
+                        letterSpacing: "0.06em",
+                        marginBottom: 8,
+                        gap: 12,
+                    }, children: [_jsxs("span", { children: ["UNIFIED \u00B7 ", uniqueChains.length, " CHAINS"] }), _jsx("span", { style: { color: "#161615", fontSize: 12, letterSpacing: 0 }, children: tokens
+                                .reduce((sum, token) => sum + getTokenFiatValue(token), 0)
+                                .toLocaleString(undefined, {
+                                currency: "USD",
+                                maximumFractionDigits: 2,
+                                style: "currency",
+                            }) })] }), uniqueChains.map((chain) => (_jsxs("div", { style: {
+                        alignItems: "center",
+                        display: "flex",
+                        justifyContent: "space-between",
+                        gap: 12,
+                        padding: "4px 0",
+                    }, children: [_jsxs("div", { style: {
+                                alignItems: "center",
+                                display: "flex",
+                                gap: 8,
+                                minWidth: 0,
+                            }, children: [chain.logo ? (_jsx("img", { alt: "", src: chain.logo, style: {
+                                        borderRadius: "999px",
+                                        height: 16,
+                                        objectFit: "cover",
+                                        width: 16,
+                                    } })) : (_jsx("div", { style: {
+                                        backgroundColor: "#E8E8E7",
+                                        borderRadius: "999px",
+                                        height: 16,
+                                        width: 16,
+                                    } })), _jsx("span", { style: {
+                                        color: "#363635",
+                                        fontFamily: '"Geist", system-ui, sans-serif',
+                                        fontSize: 13,
+                                        overflow: "hidden",
+                                        textOverflow: "ellipsis",
+                                        whiteSpace: "nowrap",
+                                    }, children: chain.name || "Unknown chain" })] }), _jsx("span", { style: {
+                                color: "#161615",
+                                fontFamily: '"Geist", system-ui, sans-serif',
+                                fontSize: 13,
+                                fontWeight: 600,
+                                whiteSpace: "nowrap",
+                            }, children: chain.balance
+                                ? formatTokenAmountDisplay(String(chain.balance).replace(/\s+[^\s]+$/, ""))
+                                : chain.balanceInFiat || "0" })] }, chain.id)))] }), document.body)
+        : null;
+    return (_jsxs("div", { onMouseEnter: openTooltip, onMouseLeave: closeTooltip, ref: clusterRef, style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 2,
+            position: "relative",
+        }, children: [tooltip, shown.map((c, i) => c.logo ? (_jsx("img", { alt: "", src: c.logo, style: {
+                    width: 16,
+                    height: 16,
+                    borderRadius: "999px",
+                    objectFit: "cover",
+                    border: "1px solid #fff",
+                } }, c.id)) : (_jsx("div", { style: {
+                    width: 16,
+                    height: 16,
+                    borderRadius: "999px",
+                    backgroundColor: "#E8E8E7",
+                } }, c.id))), _jsxs("span", { style: {
+                    fontFamily: '"Geist", system-ui, sans-serif',
+                    fontSize: 12,
+                    color: "#848483",
+                    marginLeft: 2,
+                }, children: [uniqueChains.length, " chain", uniqueChains.length !== 1 ? "s" : ""] })] }));
+};
+const FILTER_TABS = [
+    { key: "all", label: "All" },
+    { key: "native", label: "Native" },
+    { key: "stables", label: "Stables" },
+    { key: "custom", label: "Custom" },
+];
+const STABLE_SYMBOLS = new Set([
+    "AUSD",
+    "BDO",
+    "BRZ",
+    "BTCUSD",
+    "BUSD",
+    "bnbUSD",
+    "crvUSD",
+    "CUSD",
+    "DAI",
+    "DAI.e",
+    "dEURO",
+    "DUSD",
+    "EURA",
+    "EURC",
+    "EURCV",
+    "EURe",
+    "EURS",
+    "EURT",
+    "eUSD",
+    "frxUSD",
+    "GHO",
+    "GUSD",
+    "JUST",
+    "jEUR",
+    "JUSD",
+    "LUSD",
+    "rUSD",
+    "RLUSD",
+    "sUSD",
+    "svJUSD",
+    "TUSD",
+    "USDC",
+    "USDC.e",
+    "USDS",
+    "USDT",
+    "USDT0",
+    "USDT.e",
+    "ctUSD",
+    "PYUSD",
+    "USDe",
+    "xDAI",
+    "USD0",
+    "USDM",
+]);
+const normalizeTokenGroupSymbol = (symbol) => symbol
+    .trim()
+    .toUpperCase()
+    .replaceAll("₮", "T")
+    .replaceAll(/[^A-Z0-9]/g, "");
+const STABLE_SYMBOL_KEYS = new Set(Array.from(STABLE_SYMBOLS, normalizeTokenGroupSymbol));
+const isStableToken = (token) => STABLE_SYMBOL_KEYS.has(normalizeTokenGroupSymbol(token.symbol));
+function isNativeToken(t) {
+    if (isNativeLikeAddress(t.contractAddress))
+        return true;
+    const sym = t.symbol.toUpperCase();
+    const chain = (t.chainName || "").toLowerCase();
+    if (sym === "ETH")
+        return (!chain.includes("bnb") &&
+            !chain.includes("bsc") &&
+            !chain.includes("polygon") &&
+            !chain.includes("monad") &&
+            !chain.includes("hyperevm"));
+    if (sym === "POL" || sym === "MATIC")
+        return chain.includes("polygon");
+    if (sym === "HYPE")
+        return chain.includes("hyperevm");
+    if (sym === "MON")
+        return chain.includes("monad");
+    if (sym === "BNB")
+        return chain.includes("bnb") || chain.includes("bsc");
+    if (sym === "AVAX")
+        return chain.includes("avalanche");
+    if (sym === "FTM")
+        return chain.includes("fantom");
+    if (sym === "CELO")
+        return chain.includes("celo");
+    if (sym === "SUI")
+        return chain.includes("sui");
+    if (sym === "APT")
+        return chain.includes("aptos");
+    if (sym === "SOL")
+        return chain.includes("solana");
+    return false;
+}
+const MIN_FIAT_THRESHOLD = 0;
+const CHAIN_SELECTOR_CLOSE_MS = 220;
+const MODAL_HEIGHT_TRANSITION_MS = 260;
+const modalHeightTransitionStyle = {
+    interpolateSize: "allow-keywords",
+};
+const modalHeightTransition = `height ${MODAL_HEIGHT_TRANSITION_MS}ms ease, max-height ${MODAL_HEIGHT_TRANSITION_MS}ms ease`;
+export const SWAP_CHAIN_DISPLAY_ORDER = [
+    1, // Ethereum
+    42161, // Arbitrum
+    8453, // Base
+    137, // Polygon
+    10, // OP
+    999, // HyperEVM
+    56, // BSC
+    // 43114, // Avalanche
+    143, // Monad
+    4326, // MegaETH
+    4114, // Citrea
+    8217, // Kaia
+    534352, // Scroll
+];
+const SWAP_CHAIN_DISPLAY_ORDER_RANK = new Map(SWAP_CHAIN_DISPLAY_ORDER.map((chainId, index) => [chainId, index]));
+export const SWAP_CHAIN_DISPLAY_ORDER_SET = new Set(SWAP_CHAIN_DISPLAY_ORDER);
+export const sortChainIdsBySwapDisplayOrder = (chainIds) => [...chainIds].sort((a, b) => {
+    const aRank = SWAP_CHAIN_DISPLAY_ORDER_RANK.get(a) ?? Number.MAX_SAFE_INTEGER;
+    const bRank = SWAP_CHAIN_DISPLAY_ORDER_RANK.get(b) ?? Number.MAX_SAFE_INTEGER;
+    if (aRank !== bRank)
+        return aRank - bRank;
+    const aName = CHAIN_METADATA[a]?.name ?? String(a);
+    const bName = CHAIN_METADATA[b]?.name ?? String(b);
+    return aName.localeCompare(bName);
+});
+export const compareChainsBySwapDisplayOrder = (a, b) => {
+    const aRank = SWAP_CHAIN_DISPLAY_ORDER_RANK.get(a.chainId ?? -1) ??
+        Number.MAX_SAFE_INTEGER;
+    const bRank = SWAP_CHAIN_DISPLAY_ORDER_RANK.get(b.chainId ?? -1) ??
+        Number.MAX_SAFE_INTEGER;
+    if (aRank !== bRank)
+        return aRank - bRank;
+    return (a.chainName ?? "").localeCompare(b.chainName ?? "");
+};
+const UNIFIED_MAINNET_CHAIN_IDS = new Set([
+    1, 10, 56, 137, 143, 999, 4114, 8217, 8453, 42161, 43114, 534352, 4326,
+]);
+const escapeRegExp = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+const getTokenFiatValue = (token) => {
+    const parsed = Number(String(token.balanceInFiat ?? "").replace(/[^0-9.]/g, "") || 0);
+    return isNaN(parsed) || !isFinite(parsed) ? 0 : parsed;
+};
+const formatBalanceWithSymbol = (token) => {
+    const symbol = token.symbol?.trim() || "";
+    const balanceStr = String(token.balance ?? "").trim();
+    let cleanBalance = balanceStr;
+    if (symbol) {
+        cleanBalance = balanceStr.replace(new RegExp(`\\s*${escapeRegExp(symbol)}$`, "i"), "");
+    }
+    const formatted = formatTokenAmountDisplay(cleanBalance);
+    return symbol ? `${formatted} ${symbol}` : formatted;
+};
+const parseTokenAmount = (value) => {
+    if (value === null || value === undefined || value === "")
+        return undefined;
+    if (Decimal.isDecimal(value))
+        return value;
+    const cleaned = String(value).replace(/[^0-9.-]/g, "");
+    if (!cleaned || cleaned === "-" || cleaned === "." || cleaned === "-.") {
+        return undefined;
+    }
+    try {
+        const parsed = new Decimal(cleaned);
+        return parsed.isFinite() ? parsed : undefined;
+    }
+    catch {
+        return undefined;
+    }
+};
+const compareTokensByUsdBalance = (a, b) => {
+    const fiatDelta = getTokenFiatValue(b) - getTokenFiatValue(a);
+    if (fiatDelta !== 0)
+        return fiatDelta;
+    const aBalance = parseTokenAmount(a.balance) ?? new Decimal(0);
+    const bBalance = parseTokenAmount(b.balance) ?? new Decimal(0);
+    const balanceDelta = bBalance.cmp(aBalance);
+    if (balanceDelta !== 0)
+        return balanceDelta;
+    const chainDelta = compareChainsBySwapDisplayOrder(a, b);
+    if (chainDelta !== 0)
+        return chainDelta;
+    return `${a.symbol} ${a.chainName}`.localeCompare(`${b.symbol} ${b.chainName}`);
+};
+const sortTokensByUsdBalance = (tokens) => [...tokens].sort(compareTokensByUsdBalance);
+export const formatTokenAmountDisplay = (value) => {
+    const amount = parseTokenAmount(value) ?? new Decimal(0);
+    const abs = amount.abs();
+    if (amount.isZero())
+        return "0";
+    const compactUnits = [
+        { suffix: "T", value: new Decimal(1_000_000_000_000) },
+        { suffix: "B", value: new Decimal(1_000_000_000) },
+        { suffix: "M", value: new Decimal(1_000_000) },
+    ];
+    for (const unit of compactUnits) {
+        if (abs.gte(unit.value)) {
+            return `${amount
+                .div(unit.value)
+                .toDecimalPlaces(4, Decimal.ROUND_DOWN)
+                .toFixed()}${unit.suffix}`;
+        }
+    }
+    const minDisplay = new Decimal("0.00000001");
+    if (amount.gt(0) && amount.lt(minDisplay)) {
+        return `>${minDisplay.toFixed()}`;
+    }
+    return amount.toDecimalPlaces(8, Decimal.ROUND_DOWN).toFixed();
+};
+const addThousandsSeparators = (value) => {
+    const [integerPart, decimalPart] = value.split(".");
+    const withSeparators = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+    return decimalPart === undefined
+        ? withSeparators
+        : `${withSeparators}.${decimalPart}`;
+};
+export const formatUsdBalanceLabel = (value) => {
+    const amount = parseTokenAmount(value) ?? new Decimal(0);
+    const abs = amount.abs();
+    if (amount.isZero())
+        return "$0.00";
+    if (amount.gt(0) && amount.lt(0.01))
+        return "<$0.01";
+    const compactUnits = [
+        { suffix: "T", value: new Decimal(1_000_000_000_000) },
+        { suffix: "B", value: new Decimal(1_000_000_000) },
+        { suffix: "M", value: new Decimal(1_000_000) },
+    ];
+    for (const unit of compactUnits) {
+        if (abs.gte(unit.value)) {
+            return `$${amount
+                .div(unit.value)
+                .toDecimalPlaces(4, Decimal.ROUND_DOWN)
+                .toFixed()}${unit.suffix}`;
+        }
+    }
+    return `$${addThousandsSeparators(amount.toDecimalPlaces(2).toFixed(2))}`;
+};
+export const formatSelectedTokenBalanceLabel = (token) => {
+    if (!token)
+        return "";
+    const symbol = token.symbol || "";
+    const formatted = formatTokenAmountDisplay(token.balance);
+    return symbol ? `${formatted} ${symbol}` : formatted;
+};
+const getSearchTerms = (query) => query.toLowerCase().trim().split(/\s+/).filter(Boolean);
+const includesTerm = (value, term) => (value ?? "").toLowerCase().includes(term);
+const startsWithTerm = (value, term) => (value ?? "").toLowerCase().startsWith(term);
+const equalsTerm = (value, term) => (value ?? "").toLowerCase() === term;
+export const getTokenSearchRank = (token, query) => {
+    const terms = getSearchTerms(query);
+    if (terms.length === 0)
+        return null;
+    let matchedTerms = 0;
+    let symbolExactTerms = 0;
+    let symbolPrefixTerms = 0;
+    let symbolIncludeTerms = 0;
+    let namePrefixTerms = 0;
+    let tokenExactTerms = 0;
+    let tokenPrefixTerms = 0;
+    let tokenIncludeTerms = 0;
+    let chainExactTerms = 0;
+    let chainPrefixTerms = 0;
+    let chainIncludeTerms = 0;
+    let addressTerms = 0;
+    for (const term of terms) {
+        const symbolExact = equalsTerm(token.symbol, term);
+        const symbolPrefix = symbolExact || startsWithTerm(token.symbol, term);
+        const symbolInclude = symbolPrefix || includesTerm(token.symbol, term);
+        const nameExact = equalsTerm(token.name, term);
+        const namePrefix = nameExact || startsWithTerm(token.name, term);
+        const nameInclude = namePrefix || includesTerm(token.name, term);
+        const tokenExact = symbolExact || nameExact;
+        const tokenPrefix = tokenExact || symbolPrefix || namePrefix;
+        const tokenInclude = tokenPrefix || symbolInclude || nameInclude;
+        const chainExact = equalsTerm(token.chainName, term);
+        const chainPrefix = chainExact || startsWithTerm(token.chainName, term);
+        const chainInclude = chainPrefix || includesTerm(token.chainName, term);
+        const addressMatch = includesTerm(token.contractAddress, term);
+        if (tokenInclude || chainInclude || addressMatch)
+            matchedTerms += 1;
+        if (symbolExact)
+            symbolExactTerms += 1;
+        if (symbolPrefix)
+            symbolPrefixTerms += 1;
+        if (symbolInclude)
+            symbolIncludeTerms += 1;
+        if (namePrefix)
+            namePrefixTerms += 1;
+        if (tokenExact)
+            tokenExactTerms += 1;
+        if (tokenPrefix)
+            tokenPrefixTerms += 1;
+        if (tokenInclude)
+            tokenIncludeTerms += 1;
+        if (chainExact)
+            chainExactTerms += 1;
+        if (chainPrefix)
+            chainPrefixTerms += 1;
+        if (chainInclude)
+            chainIncludeTerms += 1;
+        if (addressMatch)
+            addressTerms += 1;
+    }
+    const allTermsMatched = matchedTerms === terms.length;
+    if (!allTermsMatched)
+        return null;
+    if (terms.length > 1 &&
+        chainIncludeTerms > 0 &&
+        symbolIncludeTerms === 0 &&
+        addressTerms === 0 &&
+        namePrefixTerms === 0) {
+        return null;
+    }
+    const hasTokenMatch = tokenIncludeTerms > 0;
+    const hasChainMatch = chainIncludeTerms > 0;
+    const isTokenChainMatch = allTermsMatched && hasTokenMatch && hasChainMatch;
+    let score = 20;
+    if (isTokenChainMatch) {
+        if (symbolExactTerms > 0 && chainExactTerms > 0)
+            score = 0;
+        else if (symbolExactTerms > 0 && chainPrefixTerms > 0)
+            score = 1;
+        else if (symbolExactTerms > 0 && chainIncludeTerms > 0)
+            score = 2;
+        else if (symbolPrefixTerms > 0 && chainIncludeTerms > 0)
+            score = 3;
+        else if (symbolIncludeTerms > 0 && chainIncludeTerms > 0)
+            score = 4;
+        else if (namePrefixTerms > 0 && chainIncludeTerms > 0)
+            score = 5;
+        else
+            score = 6;
+    }
+    else if (symbolExactTerms > 0)
+        score = 7;
+    else if (symbolPrefixTerms > 0)
+        score = 8;
+    else if (symbolIncludeTerms > 0)
+        score = 9;
+    else if (tokenExactTerms > 0)
+        score = 10;
+    else if (tokenPrefixTerms > 0)
+        score = 11;
+    else if (tokenIncludeTerms > 0)
+        score = 12;
+    else if (chainExactTerms > 0)
+        score = 13;
+    else if (chainPrefixTerms > 0)
+        score = 14;
+    else if (chainIncludeTerms > 0)
+        score = 15;
+    else if (addressTerms > 0)
+        score = 16;
+    return {
+        allTermsMatched,
+        isTokenChainMatch,
+        matchedTerms,
+        score,
+        tokenExactTerms,
+        tokenIncludeTerms,
+    };
+};
+const isPrioritySearchMatch = (token, query) => {
+    const rank = getTokenSearchRank(token, query);
+    return Boolean(rank &&
+        (rank.isTokenChainMatch ||
+            rank.tokenExactTerms > 0 ||
+            rank.allTermsMatched));
+};
+const compareTokensBySearch = (a, b, query) => {
+    const aRank = getTokenSearchRank(a, query);
+    const bRank = getTokenSearchRank(b, query);
+    const aScore = aRank?.score ?? Number.MAX_SAFE_INTEGER;
+    const bScore = bRank?.score ?? Number.MAX_SAFE_INTEGER;
+    if (aScore !== bScore)
+        return aScore - bScore;
+    const aMatched = aRank?.matchedTerms ?? 0;
+    const bMatched = bRank?.matchedTerms ?? 0;
+    if (aMatched !== bMatched)
+        return bMatched - aMatched;
+    const aFiat = getTokenFiatValue(a);
+    const bFiat = getTokenFiatValue(b);
+    if (aFiat !== bFiat)
+        return bFiat - aFiat;
+    return `${a.symbol} ${a.chainName}`.localeCompare(`${b.symbol} ${b.chainName}`);
+};
+function getUnifiedSymbol(token) {
+    if (token.chainId && !UNIFIED_MAINNET_CHAIN_IDS.has(token.chainId)) {
+        return null;
+    }
+    const symbol = normalizeTokenGroupSymbol(token.symbol);
+    if (symbol.includes("USDC") || symbol === "USDM")
+        return "USDC";
+    if (symbol.includes("USDT"))
+        return "USDT";
+    if (symbol === "ETH")
+        return "ETH";
+    return null;
+}
+function sameTokenOption(a, b) {
+    if (!a || !b)
+        return false;
+    if (a.isUnified || b.isUnified) {
+        return Boolean(a.isUnified && b.isUnified && a.unifiedSymbol === b.unifiedSymbol);
+    }
+    return (sameContractAddress(a.contractAddress, b.contractAddress) &&
+        a.chainId === b.chainId);
+}
+function isSameTokenList(a, b) {
+    if (a.length !== b.length)
+        return false;
+    return a.every((tokenA) => b.some((tokenB) => sameTokenOption(tokenA, tokenB)));
+}
+function dedupeTokenOptions(tokens) {
+    return tokens.reduce((acc, token) => {
+        if (!acc.some((item) => sameTokenOption(item, token))) {
+            acc.push(token);
+        }
+        return acc;
+    }, []);
+}
+function mergeTokenOptions(base, additions) {
+    return dedupeTokenOptions([...base, ...additions]);
+}
+function removeTokenOptions(base, removals) {
+    return base.filter((token) => !removals.some((removal) => sameTokenOption(token, removal)));
+}
+function isNativeLikeAddress(address) {
+    const normalized = (address ?? "").toLowerCase();
+    return (normalized === "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee" ||
+        normalized === "0x0000000000000000000000000000000000000000");
+}
+function addressTail(address) {
+    const normalized = (address ?? "").toLowerCase();
+    if (!normalized.startsWith("0x"))
+        return normalized;
+    return normalized.slice(-40);
+}
+function sameContractAddress(a, b) {
+    const normalizedA = (a ?? "").toLowerCase();
+    const normalizedB = (b ?? "").toLowerCase();
+    if (!normalizedA || !normalizedB)
+        return normalizedA === normalizedB;
+    if (normalizedA === normalizedB)
+        return true;
+    if (isNativeLikeAddress(normalizedA) && isNativeLikeAddress(normalizedB)) {
+        return true;
+    }
+    return addressTail(normalizedA) === addressTail(normalizedB);
+}
+export function SwapAssetSelector({ title, swapBalance, swapSupportedChains, staticOptions, onSelect, onBack, isMulti, selectedTokens = [], editingAssetIndex = null, onToggle, onClearSelection, onDone, allowUnified = false, preserveSelectedBelowMinimum = false, showBelowMinimumInline = false, allowSelectedTokenRemoval = false, hideCustomTab = false, autoSelectFilterTabs = false, initialFilterTab = "all", filterTabBehavior = "select-all", onFilterTabSelect, lockedTokens = [], onSelectionChange, requiredUsd, }) {
+    const sdkSwapSupportedChainIds = useMemo(() => getSdkSwapSupportedChainIds(swapSupportedChains), [swapSupportedChains]);
+    const selectorRef = useRef(null);
+    const listRef = useRef(null);
+    const chainCloseTimerRef = useRef(null);
+    const [portalRoot, setPortalRoot] = useState(null);
+    const [query, setQuery] = useState("");
+    const normalizedInitialFilterTab = hideCustomTab && initialFilterTab === "custom" ? "all" : initialFilterTab;
+    const [activeTab, setActiveTab] = useState(normalizedInitialFilterTab);
+    const [showBelowMin, setShowBelowMin] = useState(false);
+    const [isSearchFocused, setIsSearchFocused] = useState(false);
+    const [showChainSelector, setShowChainSelector] = useState(false);
+    const [isChainSelectorClosing, setIsChainSelectorClosing] = useState(false);
+    const [chainQuery, setChainQuery] = useState("");
+    const [selectedChainFilter, setSelectedChainFilter] = useState(null);
+    const [isChainSearchFocused, setIsChainSearchFocused] = useState(false);
+    const stableListHeightRef = useRef(0);
+    const [stableListHeight, setStableListHeight] = useState(null);
+    const lockedSelectedTokens = useMemo(() => dedupeTokenOptions(lockedTokens), [lockedTokens]);
+    const isLockedToken = useCallback((token) => lockedSelectedTokens.some((locked) => sameTokenOption(locked, token)), [lockedSelectedTokens]);
+    const [draftSelectedTokens, setDraftSelectedTokens] = useState(() => mergeTokenOptions(selectedTokens, lockedSelectedTokens));
+    useEffect(() => {
+        if (!isMulti)
+            return;
+        setDraftSelectedTokens(mergeTokenOptions(selectedTokens, lockedSelectedTokens));
+    }, [isMulti, lockedSelectedTokens, selectedTokens]);
+    const activeSelectedTokens = isMulti ? draftSelectedTokens : selectedTokens;
+    const emitSelectionChange = useCallback((tokens) => {
+        const next = mergeTokenOptions(tokens, lockedSelectedTokens);
+        if (isMulti) {
+            setDraftSelectedTokens(next);
+            return;
+        }
+        onSelectionChange?.(next);
+    }, [isMulti, lockedSelectedTokens, onSelectionChange]);
+    const visibleFilterTabs = useMemo(() => hideCustomTab
+        ? FILTER_TABS.filter((tab) => tab.key !== "custom")
+        : FILTER_TABS, [hideCustomTab]);
+    useEffect(() => {
+        if (hideCustomTab && activeTab === "custom") {
+            setActiveTab("all");
+        }
+    }, [activeTab, hideCustomTab]);
+    useEffect(() => {
+        setActiveTab((current) => current === normalizedInitialFilterTab
+            ? current
+            : normalizedInitialFilterTab);
+    }, [normalizedInitialFilterTab]);
+    useEffect(() => {
+        if (listRef.current) {
+            listRef.current.scrollTop = 0;
+        }
+    }, [query, activeTab, selectedChainFilter]);
+    const allTokens = useMemo(() => {
+        const isSwapSupportedToken = (token) => isSwapSupportedBySdkChainList(token.chainId, swapSupportedChains);
+        const baseTokens = staticOptions
+            ? staticOptions.filter(isSwapSupportedToken)
+            : swapBalance
+                ? deriveTokenOptions(swapBalance, swapSupportedChains)
+                : [];
+        if (!preserveSelectedBelowMinimum && lockedSelectedTokens.length === 0) {
+            return sortTokensByUsdBalance(baseTokens);
+        }
+        const merged = [...baseTokens];
+        const selectedSourceTokens = [
+            ...activeSelectedTokens,
+            ...lockedSelectedTokens,
+        ].flatMap((token) => token.isUnified && token.sourceTokens?.length
+            ? token.sourceTokens
+            : [token]);
+        for (const selectedToken of selectedSourceTokens) {
+            const alreadyPresent = merged.some((token) => sameTokenOption(token, selectedToken));
+            if (!alreadyPresent) {
+                merged.push(selectedToken);
+            }
+        }
+        return sortTokensByUsdBalance(merged.filter(isSwapSupportedToken));
+    }, [
+        lockedSelectedTokens,
+        preserveSelectedBelowMinimum,
+        activeSelectedTokens,
+        swapBalance,
+        swapSupportedChains,
+        staticOptions,
+    ]);
+    const getFilterTabTokens = useCallback((tab) => {
+        let result = allTokens;
+        if (selectedChainFilter !== null) {
+            result = result.filter((token) => token.chainId === selectedChainFilter);
+        }
+        if (tab === "native")
+            result = result.filter(isNativeToken);
+        else if (tab === "stables") {
+            result = result.filter(isStableToken);
+        }
+        if (showBelowMinimumInline) {
+            return mergeTokenOptions(result, lockedSelectedTokens);
+        }
+        return mergeTokenOptions(result.filter((token) => getTokenFiatValue(token) >= MIN_FIAT_THRESHOLD), lockedSelectedTokens.filter((token) => getTokenFiatValue(token) >= MIN_FIAT_THRESHOLD));
+    }, [allTokens, lockedSelectedTokens, selectedChainFilter]);
+    const selectionMatchesFilterTab = useCallback((tab) => {
+        if (tab === "custom")
+            return true;
+        const expected = getFilterTabTokens(tab);
+        const selected = mergeTokenOptions(activeSelectedTokens, lockedSelectedTokens);
+        return (selected.length === expected.length &&
+            selected.every((token) => expected.some((expectedToken) => sameTokenOption(expectedToken, token))));
+    }, [activeSelectedTokens, getFilterTabTokens, lockedSelectedTokens]);
+    useEffect(() => {
+        if (!autoSelectFilterTabs ||
+            filterTabBehavior === "source-pool" ||
+            !isMulti ||
+            activeTab === "custom")
+            return;
+        if (activeSelectedTokens.length === 0 && lockedSelectedTokens.length === 0)
+            return;
+        if (!selectionMatchesFilterTab(activeTab)) {
+            setActiveTab("custom");
+        }
+    }, [
+        activeTab,
+        activeSelectedTokens.length,
+        autoSelectFilterTabs,
+        filterTabBehavior,
+        isMulti,
+        lockedSelectedTokens.length,
+        selectionMatchesFilterTab,
+    ]);
+    /* Search + tab + chain filter */
+    const filtered = useMemo(() => {
+        let result = allTokens;
+        if (selectedChainFilter !== null) {
+            result = result.filter((t) => t.chainId === selectedChainFilter);
+        }
+        if (query.trim()) {
+            result = result
+                .filter((t) => getTokenSearchRank(t, query) !== null)
+                .sort((a, b) => compareTokensBySearch(a, b, query));
+        }
+        if (activeTab === "native")
+            result = result.filter(isNativeToken);
+        else if (activeTab === "stables")
+            result = result.filter(isStableToken);
+        else if (activeTab === "custom" && !autoSelectFilterTabs)
+            result = result.filter((t) => !isNativeToken(t) && !isStableToken(t));
+        return result;
+    }, [activeTab, allTokens, autoSelectFilterTabs, query, selectedChainFilter]);
+    const isTokenSelectedForVisibility = useCallback((token) => {
+        if (!preserveSelectedBelowMinimum)
+            return false;
+        return activeSelectedTokens.some((selected) => sameTokenOption(selected, token) ||
+            Boolean(selected.isUnified &&
+                selected.sourceTokens?.some((source) => sameTokenOption(source, token))));
+    }, [activeSelectedTokens, preserveSelectedBelowMinimum]);
+    const isUnifiedSelectedForVisibility = useCallback((symbol) => preserveSelectedBelowMinimum &&
+        activeSelectedTokens.some((selected) => selected.isUnified && selected.unifiedSymbol === symbol), [activeSelectedTokens, preserveSelectedBelowMinimum]);
+    /* Split into above/below minimum */
+    const { aboveMin, belowMin } = useMemo(() => {
+        const above = [];
+        const below = [];
+        for (const t of filtered) {
+            const fiat = getTokenFiatValue(t);
+            if (showBelowMinimumInline ||
+                fiat >= MIN_FIAT_THRESHOLD ||
+                isTokenSelectedForVisibility(t) ||
+                isPrioritySearchMatch(t, query))
+                above.push(t);
+            else
+                below.push(t);
+        }
+        return { aboveMin: above, belowMin: below };
+    }, [filtered, isTokenSelectedForVisibility, query, showBelowMinimumInline]);
+    /* Group by symbol */
+    const groupedFiltered = useMemo(() => {
+        const groups = {};
+        for (const token of filtered) {
+            const unifiedSym = allowUnified ? getUnifiedSymbol(token) : null;
+            if (!showBelowMinimumInline &&
+                unifiedSym &&
+                getTokenFiatValue(token) < MIN_FIAT_THRESHOLD) {
+                continue;
+            }
+            const key = unifiedSym ?? `${token.contractAddress}-${token.chainId}`;
+            if (!groups[key])
+                groups[key] = [];
+            groups[key].push(token);
+        }
+        return Object.values(groups)
+            .map((group) => {
+            const sortedGroup = sortTokensByUsdBalance(group);
+            let totalFiatVal = 0;
+            let totalBalVal = 0;
+            for (const t of sortedGroup) {
+                const fiatVal = getTokenFiatValue(t);
+                totalFiatVal += isNaN(fiatVal) || !isFinite(fiatVal) ? 0 : fiatVal;
+                const balStr = String(t.balance ?? "").replace(/[^0-9.]/g, "");
+                const balVal = Number(balStr || 0);
+                totalBalVal += isNaN(balVal) || !isFinite(balVal) ? 0 : balVal;
+            }
+            const unifiedSym = allowUnified
+                ? getUnifiedSymbol(sortedGroup[0])
+                : null;
+            const symbol = unifiedSym ?? sortedGroup[0].symbol;
+            const isStable = ["USDC", "USDT", "DAI", "USDM", "CTUSD"].includes(symbol.toUpperCase());
+            const maxDigits = isStable ? 2 : 6;
+            const formattedBal = totalBalVal.toLocaleString(undefined, {
+                minimumFractionDigits: 0,
+                maximumFractionDigits: maxDigits,
+            });
+            return {
+                symbol,
+                logo: sortedGroup[0].logo,
+                totalFiat: totalFiatVal,
+                totalFiatStr: `$${totalFiatVal.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 2 })}`,
+                totalBalStr: `${formattedBal} ${symbol}`,
+                totalBalRaw: totalBalVal,
+                tokens: sortedGroup,
+                isUnifiedCandidate: Boolean(unifiedSym && group.length > 1),
+            };
+        })
+            .filter((group) => {
+            const hasSelectedToken = group.tokens.some(isTokenSelectedForVisibility);
+            const hasSelectedUnified = isUnifiedSelectedForVisibility(group.symbol);
+            const hasPrioritySearchMatch = group.tokens.some((token) => isPrioritySearchMatch(token, query));
+            if (showBelowMinimumInline) {
+                return true;
+            }
+            if (group.isUnifiedCandidate) {
+                return (group.totalFiat >= MIN_FIAT_THRESHOLD ||
+                    hasSelectedToken ||
+                    hasSelectedUnified ||
+                    hasPrioritySearchMatch);
+            }
+            return group.tokens.some((token) => getTokenFiatValue(token) >= MIN_FIAT_THRESHOLD ||
+                isTokenSelectedForVisibility(token) ||
+                isPrioritySearchMatch(token, query));
+        })
+            .sort((a, b) => {
+            if (query.trim()) {
+                const aScore = Math.min(...a.tokens.map((token) => getTokenSearchRank(token, query)?.score ??
+                    Number.MAX_SAFE_INTEGER));
+                const bScore = Math.min(...b.tokens.map((token) => getTokenSearchRank(token, query)?.score ??
+                    Number.MAX_SAFE_INTEGER));
+                if (aScore !== bScore)
+                    return aScore - bScore;
+            }
+            return b.totalFiat - a.totalFiat;
+        });
+    }, [
+        filtered,
+        allowUnified,
+        isTokenSelectedForVisibility,
+        isUnifiedSelectedForVisibility,
+        query,
+    ]);
+    const [expandedGroups, setExpandedGroups] = useState(new Set());
+    const toggleGroup = (symbol, e) => {
+        e.stopPropagation();
+        setExpandedGroups((prev) => {
+            const next = new Set(prev);
+            if (next.has(symbol))
+                next.delete(symbol);
+            else
+                next.add(symbol);
+            return next;
+        });
+    };
+    const isTokenSelectedInOtherSlot = (token) => !allowSelectedTokenRemoval &&
+        activeSelectedTokens.some((st, idx) => idx !== editingAssetIndex && sameTokenOption(st, token));
+    const isTokenSelectedInCurrentSlot = (token) => {
+        if (isMulti) {
+            return activeSelectedTokens.some((st) => sameTokenOption(st, token) ||
+                Boolean(st.isUnified &&
+                    st.sourceTokens?.some((source) => sameTokenOption(source, token))));
+        }
+        if (allowSelectedTokenRemoval) {
+            return activeSelectedTokens.some((st) => sameTokenOption(st, token) ||
+                Boolean(st.isUnified &&
+                    st.sourceTokens?.some((source) => sameTokenOption(source, token))));
+        }
+        if (editingAssetIndex === null)
+            return false;
+        const st = activeSelectedTokens[editingAssetIndex];
+        return sameTokenOption(st, token);
+    };
+    const isGroupUnifiedSelectedInOtherSlot = (group) => {
+        if (allowSelectedTokenRemoval)
+            return false;
+        const relevantTokens = isMulti
+            ? activeSelectedTokens
+            : activeSelectedTokens.filter((_, idx) => idx !== editingAssetIndex);
+        return relevantTokens.some((st) => st.isUnified && st.unifiedSymbol === group.symbol);
+    };
+    const isGroupUnifiedSelectedInCurrentSlot = (group) => {
+        if (isMulti) {
+            return activeSelectedTokens.some((st) => st.isUnified && st.unifiedSymbol === group.symbol);
+        }
+        if (editingAssetIndex === null)
+            return false;
+        const st = activeSelectedTokens[editingAssetIndex];
+        return Boolean(st?.isUnified && st.unifiedSymbol === group.symbol);
+    };
+    const isAnyTokenInGroupSelectedInOtherSlot = (group) => {
+        if (allowSelectedTokenRemoval)
+            return false;
+        const relevantTokens = isMulti
+            ? activeSelectedTokens
+            : activeSelectedTokens.filter((_, idx) => idx !== editingAssetIndex);
+        return relevantTokens.some((st) => group.tokens.some((gt) => sameTokenOption(gt, st)) ||
+            (st.isUnified && st.unifiedSymbol === group.symbol));
+    };
+    const handleFilterTabClick = (tab) => {
+        setActiveTab(tab);
+        if (autoSelectFilterTabs && isMulti && tab !== "custom") {
+            if (filterTabBehavior === "source-pool") {
+                onFilterTabSelect?.(tab);
+                return;
+            }
+            if (!onSelectionChange)
+                return;
+            emitSelectionChange(getFilterTabTokens(tab));
+        }
+    };
+    const handleClearSelection = () => {
+        if (isMulti && onSelectionChange) {
+            setActiveTab("custom");
+            emitSelectionChange([]);
+            return;
+        }
+        onClearSelection?.();
+    };
+    const handleMultiTokenToggle = (token) => {
+        if (!autoSelectFilterTabs || !isMulti || !onSelectionChange) {
+            onToggle?.(token);
+            return;
+        }
+        setActiveTab("custom");
+        const current = mergeTokenOptions(activeSelectedTokens, lockedSelectedTokens);
+        const targets = token.isUnified && token.sourceTokens?.length
+            ? token.sourceTokens
+            : [token];
+        const unlockedTargets = targets.filter((target) => !isLockedToken(target));
+        if (unlockedTargets.length === 0)
+            return;
+        const allTargetsSelected = unlockedTargets.every((target) => current.some((item) => sameTokenOption(item, target)));
+        const next = allTargetsSelected
+            ? removeTokenOptions(current, unlockedTargets)
+            : mergeTokenOptions(current, unlockedTargets);
+        emitSelectionChange(next);
+    };
+    /* ── Render a single-chain token row ── */
+    const renderTokenRow = (token, indent = false, isDisabledByUnified = false) => {
+        const selectedInOther = !isMulti && isTokenSelectedInOtherSlot(token);
+        if (selectedInOther)
+            return null;
+        const selectedInCurrent = isTokenSelectedInCurrentSlot(token);
+        const locked = isLockedToken(token);
+        const disabled = isDisabledByUnified || locked;
+        return (_jsxs("button", { disabled: disabled, onClick: () => {
+                if (disabled)
+                    return;
+                if (isMulti) {
+                    handleMultiTokenToggle(token);
+                }
+                else if (allowSelectedTokenRemoval &&
+                    selectedInCurrent &&
+                    onToggle) {
+                    onToggle(token);
+                }
+                else
+                    onSelect(token);
+            }, style: {
+                width: "100%",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                padding: "10px 14px",
+                paddingLeft: indent ? "36px" : "14px",
+                backgroundColor: "transparent",
+                border: "none",
+                cursor: disabled ? "not-allowed" : "pointer",
+                borderBottom: "1px solid #F0F0EF",
+                boxSizing: "border-box",
+                opacity: isDisabledByUnified ? 0.5 : 1,
+            }, children: [_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [_jsx(SelectionControl, { multi: Boolean(isMulti), selected: selectedInCurrent }), _jsx("div", { style: { flexShrink: 0, width: 40, height: 40 }, children: token.logo ? (_jsx("img", { alt: token.symbol, onError: (e) => {
+                                    e.target.style.display = "none";
+                                }, src: token.logo, style: {
+                                    width: 40,
+                                    height: 40,
+                                    borderRadius: "999px",
+                                    objectFit: "cover",
+                                } })) : (_jsx("div", { style: {
+                                    width: 40,
+                                    height: 40,
+                                    borderRadius: "999px",
+                                    backgroundColor: brand,
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    color: "#fff",
+                                    fontSize: 14,
+                                    fontWeight: 700,
+                                }, children: token.symbol.slice(0, 2) })) }), _jsxs("div", { style: {
+                                display: "flex",
+                                flexDirection: "column",
+                                alignItems: "flex-start",
+                            }, children: [_jsx("span", { style: {
+                                        fontFamily: '"Geist", system-ui, sans-serif',
+                                        fontWeight: 500,
+                                        fontSize: 15,
+                                        color: "#161615",
+                                    }, children: token.symbol }), token.chainName && (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [token.chainLogo && (_jsx("img", { alt: "", src: token.chainLogo, style: {
+                                                borderRadius: "999px",
+                                                height: 14,
+                                                objectFit: "cover",
+                                                width: 14,
+                                            } })), _jsx("span", { style: {
+                                                fontFamily: '"Geist", system-ui, sans-serif',
+                                                fontSize: 13,
+                                                color: "#848483",
+                                            }, children: token.chainName })] }))] })] }), _jsxs("div", { style: {
+                        display: "flex",
+                        flexDirection: "column",
+                        alignItems: "flex-end",
+                    }, children: [_jsx("span", { style: {
+                                fontFamily: '"Geist", system-ui, sans-serif',
+                                fontWeight: 500,
+                                fontSize: 14,
+                                color: "#161615",
+                            }, children: formatBalanceWithSymbol(token) }), _jsxs("span", { style: {
+                                fontFamily: '"Geist", system-ui, sans-serif',
+                                fontSize: 13,
+                                color: "#848483",
+                            }, children: ["\u2248 ", token.balanceInFiat] })] })] }, `${token.contractAddress}-${token.chainId}`));
+    };
+    /* ── Render a unified (multi-chain) group row ── */
+    const renderGroupRow = (group) => {
+        if (!group.isUnifiedCandidate) {
+            return group.tokens
+                .filter((token) => getTokenFiatValue(token) >= MIN_FIAT_THRESHOLD ||
+                isTokenSelectedForVisibility(token) ||
+                isPrioritySearchMatch(token, query))
+                .map((token) => renderTokenRow(token));
+        }
+        const unifiedSelectedInOther = !isMulti && isGroupUnifiedSelectedInOtherSlot(group);
+        if (unifiedSelectedInOther)
+            return null;
+        const individualTokens = group.tokens.filter((token) => getTokenFiatValue(token) >= MIN_FIAT_THRESHOLD ||
+            isTokenSelectedForVisibility(token) ||
+            isPrioritySearchMatch(token, query));
+        const hasVisibleUnifiedRow = (group.totalFiat >= MIN_FIAT_THRESHOLD ||
+            isUnifiedSelectedForVisibility(group.symbol)) &&
+            !unifiedSelectedInOther;
+        const visibleTokensCount = individualTokens.filter((t) => !isTokenSelectedInOtherSlot(t)).length;
+        if (!hasVisibleUnifiedRow && visibleTokensCount === 0)
+            return null;
+        const isExpanded = expandedGroups.has(group.symbol);
+        const unifiedSelectedInCurrent = isGroupUnifiedSelectedInCurrentSlot(group);
+        const anyIndividualSelectedInOther = isAnyTokenInGroupSelectedInOtherSlot(group);
+        const anyIndividualSelectedInCurrent = group.tokens.some(isTokenSelectedInCurrentSlot);
+        const selectedChildCount = group.tokens.filter(isTokenSelectedInCurrentSlot).length;
+        const areAllChildrenSelected = group.tokens.length > 0 && selectedChildCount === group.tokens.length;
+        const isPartiallySelected = selectedChildCount > 0 && selectedChildCount < group.tokens.length;
+        const shouldHideUnifiedRow = !isMulti &&
+            (anyIndividualSelectedInOther ||
+                anyIndividualSelectedInCurrent ||
+                (group.totalFiat < MIN_FIAT_THRESHOLD &&
+                    !isUnifiedSelectedForVisibility(group.symbol)));
+        const shouldHideIndividualRows = !isMulti && (unifiedSelectedInOther || unifiedSelectedInCurrent);
+        const unifiedToken = {
+            ...group.tokens[0],
+            balance: String(group.totalBalRaw),
+            balanceInFiat: group.totalFiatStr,
+            chainId: undefined,
+            chainName: "All Chains",
+            chainLogo: "/nexus-widget/all-chains.png",
+            contractAddress: `${group.symbol}-UNIFIED`,
+            isUnified: true,
+            name: group.symbol,
+            sourceTokens: group.tokens,
+            symbol: group.symbol,
+            unifiedSymbol: group.symbol,
+        };
+        return (_jsxs("div", { style: { display: "flex", flexDirection: "column" }, children: [!shouldHideUnifiedRow && (_jsxs("button", { onClick: (e) => {
+                        if (isMulti) {
+                            toggleGroup(group.symbol, e);
+                            return;
+                        }
+                        onSelect(unifiedToken);
+                    }, style: {
+                        width: "100%",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "space-between",
+                        padding: "10px 14px",
+                        backgroundColor: "transparent",
+                        border: "none",
+                        cursor: "pointer",
+                        borderBottom: "1px solid #F0F0EF",
+                        boxSizing: "border-box",
+                    }, children: [_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [_jsx("div", { onClick: (e) => {
+                                        e.stopPropagation();
+                                        if (isMulti)
+                                            handleMultiTokenToggle(unifiedToken);
+                                        else
+                                            onSelect(unifiedToken);
+                                    }, style: { cursor: "pointer" }, children: _jsx(SelectionControl, { indeterminate: isMulti ? isPartiallySelected : false, multi: Boolean(isMulti), selected: isMulti ? areAllChildrenSelected : unifiedSelectedInCurrent }) }), _jsx("div", { style: {
+                                        position: "relative",
+                                        flexShrink: 0,
+                                        width: 40,
+                                        height: 40,
+                                    }, children: group.logo ? (_jsx("img", { alt: group.symbol, onError: (e) => {
+                                            e.target.style.display = "none";
+                                        }, src: group.logo, style: {
+                                            width: 40,
+                                            height: 40,
+                                            borderRadius: "999px",
+                                            objectFit: "cover",
+                                        } })) : (_jsx("div", { style: {
+                                            width: 40,
+                                            height: 40,
+                                            borderRadius: "999px",
+                                            backgroundColor: brand,
+                                            display: "flex",
+                                            alignItems: "center",
+                                            justifyContent: "center",
+                                            color: "#fff",
+                                            fontSize: 14,
+                                            fontWeight: 700,
+                                        }, children: group.symbol.slice(0, 2) })) }), _jsxs("div", { style: {
+                                        display: "flex",
+                                        flexDirection: "column",
+                                        alignItems: "flex-start",
+                                    }, children: [_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [_jsx("span", { style: {
+                                                        fontFamily: '"Geist", system-ui, sans-serif',
+                                                        fontWeight: 500,
+                                                        fontSize: 15,
+                                                        color: "#161615",
+                                                    }, children: group.symbol }), _jsx("span", { style: {
+                                                        fontFamily: '"Geist", system-ui, sans-serif',
+                                                        fontSize: 11,
+                                                        fontWeight: 600,
+                                                        color: brand,
+                                                        backgroundColor: "#E8F0FF",
+                                                        borderRadius: 4,
+                                                        padding: "2px 8px",
+                                                        letterSpacing: "0.04em",
+                                                        lineHeight: "18px",
+                                                    }, children: "UNIFIED" })] }), _jsx(ChainLogos, { tokens: group.tokens })] })] }), _jsx("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: _jsxs("div", { style: {
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    alignItems: "flex-end",
+                                }, children: [_jsx("span", { style: {
+                                            fontFamily: '"Geist", system-ui, sans-serif',
+                                            fontWeight: 500,
+                                            fontSize: 14,
+                                            color: "#161615",
+                                        }, children: group.totalBalStr }), _jsxs("span", { style: {
+                                            fontFamily: '"Geist", system-ui, sans-serif',
+                                            fontSize: 13,
+                                            color: "#848483",
+                                        }, children: ["\u2248 ", group.totalFiatStr] })] }) })] })), isMulti ? (_jsx("div", { style: {
+                        display: "grid",
+                        gridTemplateRows: isExpanded ? "1fr" : "0fr",
+                        opacity: isExpanded ? 1 : 0,
+                        transition: "grid-template-rows 0.3s ease, opacity 0.3s ease",
+                    }, children: _jsx("div", { style: { overflow: "hidden" }, children: group.tokens.map((token) => renderTokenRow(token, true, false)) }) })) : (!shouldHideIndividualRows &&
+                    individualTokens.map((token) => renderTokenRow(token)))] }, group.symbol));
+    };
+    const isLoading = !staticOptions && swapBalance === null;
+    const selectedAssetCount = activeSelectedTokens.length;
+    const requiredUsdAmount = parseTokenAmount(requiredUsd);
+    const selectedUsdAmount = activeSelectedTokens.reduce((sum, token) => {
+        if (token.isUnified && token.sourceTokens?.length) {
+            return sum.plus(token.sourceTokens.reduce((sourceSum, source) => {
+                const value = parseTokenAmount(source.balanceInFiat) ?? new Decimal(0);
+                return value.gte(MIN_FIAT_THRESHOLD)
+                    ? sourceSum.plus(value)
+                    : sourceSum;
+            }, new Decimal(0)));
+        }
+        const value = parseTokenAmount(token.balanceInFiat) ?? new Decimal(0);
+        return value.gte(MIN_FIAT_THRESHOLD) ? sum.plus(value) : sum;
+    }, new Decimal(0));
+    const selectionDeficitUsdAmount = requiredUsdAmount && selectedUsdAmount.lt(requiredUsdAmount)
+        ? requiredUsdAmount.minus(selectedUsdAmount)
+        : new Decimal(0);
+    const shouldShowSelectionProgress = Boolean(isMulti &&
+        requiredUsdAmount &&
+        requiredUsdAmount.gt(0) &&
+        selectionDeficitUsdAmount.gt(0));
+    const selectionProgressPercent = shouldShowSelectionProgress && requiredUsdAmount
+        ? Decimal.min(100, selectedUsdAmount.div(requiredUsdAmount).mul(100)).toNumber()
+        : 0;
+    const subtitle = isMulti
+        ? `${selectedAssetCount} asset${selectedAssetCount === 1 ? "" : "s"} selected`
+        : "";
+    useEffect(() => {
+        setPortalRoot(selectorRef.current?.closest("[data-nexus-widget-root]"));
+    }, []);
+    useEffect(() => {
+        return () => {
+            if (chainCloseTimerRef.current) {
+                clearTimeout(chainCloseTimerRef.current);
+            }
+        };
+    }, []);
+    const openChainSelector = () => {
+        if (chainCloseTimerRef.current) {
+            clearTimeout(chainCloseTimerRef.current);
+            chainCloseTimerRef.current = null;
+        }
+        setChainQuery("");
+        setIsChainSelectorClosing(false);
+        setShowChainSelector(true);
+    };
+    const closeChainSelector = () => {
+        if (chainCloseTimerRef.current) {
+            clearTimeout(chainCloseTimerRef.current);
+        }
+        setIsChainSelectorClosing(true);
+        chainCloseTimerRef.current = setTimeout(() => {
+            setShowChainSelector(false);
+            setIsChainSelectorClosing(false);
+            chainCloseTimerRef.current = null;
+        }, CHAIN_SELECTOR_CLOSE_MS);
+    };
+    const chainOptions = useMemo(() => {
+        const options = new Map();
+        for (const chain of swapSupportedChains ?? []) {
+            if (!sdkSwapSupportedChainIds &&
+                !SWAP_CHAIN_DISPLAY_ORDER_SET.has(chain.id)) {
+                continue;
+            }
+            if (!isSwapSupportedBySdkChainList(chain.id, swapSupportedChains)) {
+                continue;
+            }
+            options.set(chain.id, {
+                contractAddress: "",
+                symbol: "",
+                name: getShortChainName(chain.id, chain.name),
+                decimals: 18,
+                balance: "0",
+                balanceInFiat: "$0.00",
+                chainId: chain.id,
+                chainName: getShortChainName(chain.id, chain.name),
+                chainLogo: chain.logo,
+            });
+        }
+        for (const token of allTokens) {
+            if (!token.chainId ||
+                (!sdkSwapSupportedChainIds &&
+                    !SWAP_CHAIN_DISPLAY_ORDER_SET.has(token.chainId)) ||
+                !isSwapSupportedBySdkChainList(token.chainId, swapSupportedChains)) {
+                continue;
+            }
+            if (!options.has(token.chainId)) {
+                options.set(token.chainId, token);
+            }
+        }
+        return Array.from(options.values()).sort(compareChainsBySwapDisplayOrder);
+    }, [allTokens, sdkSwapSupportedChainIds, swapSupportedChains]);
+    const selectedChainToken = selectedChainFilter === null
+        ? undefined
+        : chainOptions.find((token) => token.chainId === selectedChainFilter);
+    const selectedChainLabel = selectedChainFilter === null
+        ? "All chains"
+        : selectedChainToken?.chainName || "Chain";
+    const handleDone = () => {
+        if (isMulti && onSelectionChange) {
+            onSelectionChange(mergeTokenOptions(draftSelectedTokens, lockedSelectedTokens));
+        }
+        onDone?.();
+    };
+    return (_jsxs("div", { ref: selectorRef, style: {
+            ...modalHeightTransitionStyle,
+            boxSizing: "border-box",
+            display: "flex",
+            flex: "1 1 auto",
+            flexDirection: "column",
+            height: "100%",
+            maxHeight: "100%",
+            minHeight: 0,
+            overflow: "hidden",
+            padding: "12px",
+            transition: modalHeightTransition,
+            width: "100%",
+            willChange: "height, max-height",
+        }, children: [_jsx("div", { style: {
+                    width: "100%",
+                    display: "flex",
+                    justifyContent: "center",
+                    marginBottom: 10,
+                }, children: _jsx("div", { style: {
+                        width: 32,
+                        height: 4,
+                        borderRadius: 2,
+                        backgroundColor: "#E8E8E7",
+                    } }) }), _jsxs("div", { style: {
+                    display: "flex",
+                    alignItems: "flex-start",
+                    gap: 12,
+                    marginBottom: 12,
+                }, children: [_jsx("button", { onClick: onBack, style: {
+                            width: 32,
+                            height: 32,
+                            borderRadius: 8,
+                            border: "1px solid #E8E8E7",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            backgroundColor: "#FFFFFE",
+                            cursor: "pointer",
+                            flexShrink: 0,
+                        }, children: _jsx(ChevronDown, { style: { width: 16, height: 16, transform: "rotate(90deg)" } }) }), _jsxs("div", { style: {
+                            display: "flex",
+                            flexDirection: "column",
+                            gap: "6px",
+                            minWidth: 0,
+                            flex: "1 1 auto",
+                        }, children: [_jsx("span", { style: {
+                                    fontFamily: '"Geist", system-ui, sans-serif',
+                                    fontSize: 18,
+                                    fontWeight: 600,
+                                    color: "#161615",
+                                }, children: title }), subtitle && (_jsx("span", { style: {
+                                    fontFamily: '"Geist", system-ui, sans-serif',
+                                    fontSize: 13,
+                                    color: "#848483",
+                                }, children: subtitle }))] }), isMulti &&
+                        selectedAssetCount > 0 &&
+                        (onClearSelection || onSelectionChange) && (_jsx("button", { onClick: handleClearSelection, style: {
+                            backgroundColor: "transparent",
+                            border: "none",
+                            color: brand,
+                            cursor: "pointer",
+                            flexShrink: 0,
+                            fontFamily: '"Geist", system-ui, sans-serif',
+                            fontSize: 13,
+                            fontWeight: 500,
+                            lineHeight: "20px",
+                            padding: "2px 0",
+                        }, children: "Deselect all" }))] }), _jsx("div", { style: { paddingBottom: 6 }, children: _jsxs("div", { style: {
+                        display: "flex",
+                        alignItems: "center",
+                        height: 42,
+                        gap: 8,
+                        borderRadius: 12,
+                        border: `1px solid ${isSearchFocused ? "#A8C9FF" : "#E8E8E7"}`,
+                        boxShadow: isSearchFocused
+                            ? "0 0 0 1px rgba(0,107,244,0.16)"
+                            : "none",
+                        padding: "0 8px 0 16px",
+                        backgroundColor: "#F0F0EF",
+                    }, children: [_jsx(Search, { style: { width: 20, height: 20, color: "#848483", flexShrink: 0 } }), _jsx("input", { onBlur: () => setIsSearchFocused(false), onChange: (e) => setQuery(e.target.value), onFocus: () => setIsSearchFocused(true), placeholder: "Search token, chain or address", style: {
+                                flex: 1,
+                                backgroundColor: "transparent",
+                                border: "none",
+                                outline: "none",
+                                fontFamily: '"Geist", system-ui, sans-serif',
+                                fontSize: 14,
+                                color: "#161615",
+                                minWidth: 0,
+                            }, value: query }), query && (_jsx("button", { onClick: () => setQuery(""), style: {
+                                background: "none",
+                                border: "none",
+                                cursor: "pointer",
+                                padding: 0,
+                            }, children: _jsx(X, { style: { width: 16, height: 16, color: "#848483" } }) })), _jsxs("button", { onClick: openChainSelector, style: {
+                                display: "flex",
+                                alignItems: "center",
+                                gap: 5,
+                                padding: "4px 8px 4px 5px",
+                                borderRadius: 999,
+                                backgroundColor: "#FFFFFE",
+                                border: "1px solid #E8E8E7",
+                                cursor: "pointer",
+                                height: 38,
+                                flexShrink: 0,
+                                boxShadow: "0px 1px 2px rgba(0,0,0,0.05)",
+                            }, children: [selectedChainFilter === null ? (_jsx(Globe, { style: {
+                                        width: 16,
+                                        height: 16,
+                                        color: "#161615",
+                                        flexShrink: 0,
+                                    } })) : (_jsx("img", { alt: selectedChainLabel, src: selectedChainToken?.chainLogo, style: {
+                                        width: 18,
+                                        height: 18,
+                                        borderRadius: "999px",
+                                        objectFit: "cover",
+                                        flexShrink: 0,
+                                    } })), _jsx("span", { style: {
+                                        color: "#161615",
+                                        fontFamily: '"Geist", system-ui, sans-serif',
+                                        fontSize: "14px",
+                                        fontWeight: 500,
+                                        lineHeight: "18px",
+                                        maxWidth: "86px",
+                                        overflow: "hidden",
+                                        textOverflow: "ellipsis",
+                                        whiteSpace: "nowrap",
+                                    }, children: selectedChainLabel }), _jsx(ChevronDown, { style: { width: 14, height: 14, color: "#848483" } })] })] }) }), _jsx("div", { style: {
+                    display: "flex",
+                    gap: 0,
+                    backgroundColor: "#F0F0EF",
+                    borderRadius: 8,
+                    padding: 4,
+                    marginBottom: 6,
+                }, children: visibleFilterTabs.map((tab) => (_jsx("button", { onClick: () => handleFilterTabClick(tab.key), disabled: tab.key === "custom" && autoSelectFilterTabs, style: {
+                        flex: 1,
+                        padding: "6px 0",
+                        backgroundColor: activeTab === tab.key ? "#FFFFFE" : "transparent",
+                        border: "none",
+                        borderRadius: 6,
+                        cursor: "pointer",
+                        fontFamily: '"Geist", system-ui, sans-serif',
+                        fontSize: 13,
+                        fontWeight: 500,
+                        color: activeTab === tab.key ? "#161615" : "#848483",
+                        boxShadow: activeTab === tab.key ? "0px 1px 2px rgba(0,0,0,0.05)" : "none",
+                        transition: "all 0.15s",
+                    }, children: autoSelectFilterTabs && tab.key === "all" ? "Any" : tab.label }, tab.key))) }), _jsx("div", { ref: listRef, style: {
+                    flex: "1 1 auto",
+                    minHeight: 0,
+                    overflowY: "auto",
+                    paddingBottom: 6,
+                }, children: isLoading ? (_jsxs("div", { style: {
+                        display: "flex",
+                        flexDirection: "column",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        padding: "40px 0",
+                        gap: 12,
+                    }, children: [_jsx(Loader2, { style: {
+                                width: 20,
+                                height: 20,
+                                color: "#848483",
+                                animation: "spin 1s linear infinite",
+                            } }), _jsx("p", { style: {
+                                fontFamily: '"Geist", system-ui, sans-serif',
+                                fontSize: 14,
+                                color: "#848483",
+                            }, children: "Loading assets\u2026" })] })) : aboveMin.length === 0 && belowMin.length === 0 ? (_jsx("p", { style: {
+                        fontFamily: '"Geist", system-ui, sans-serif',
+                        fontSize: 14,
+                        color: "#848483",
+                        textAlign: "center",
+                        padding: "32px 0",
+                    }, children: "No tokens found" })) : (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [groupedFiltered.length > 0 && (_jsx("div", { style: {
+                                border: "1px solid #E8E8E7",
+                                borderRadius: 14,
+                                overflowX: "hidden",
+                                overflowY: "visible",
+                                backgroundColor: "#FFFFFE",
+                            }, children: groupedFiltered.map((group) => group.tokens.length === 1
+                                ? renderTokenRow(group.tokens[0])
+                                : renderGroupRow(group)) })), belowMin.length > 0 && (_jsxs("div", { style: {
+                                backgroundColor: "#FFFFFE",
+                                border: "1px solid #E8E8E7",
+                                borderRadius: 12,
+                                overflow: "hidden",
+                            }, children: [_jsxs("button", { onClick: () => setShowBelowMin((v) => !v), style: {
+                                        width: "100%",
+                                        display: "flex",
+                                        alignItems: "center",
+                                        justifyContent: "space-between",
+                                        padding: "11px 12px",
+                                        backgroundColor: "transparent",
+                                        border: "none",
+                                        cursor: "pointer",
+                                        boxSizing: "border-box",
+                                    }, children: [_jsxs("div", { style: {
+                                                display: "flex",
+                                                alignItems: "center",
+                                                gap: 10,
+                                                minWidth: 0,
+                                            }, children: [_jsx("span", { style: {
+                                                        alignItems: "center",
+                                                        backgroundColor: "#FFF0D6",
+                                                        borderRadius: "999px",
+                                                        display: "flex",
+                                                        flexShrink: 0,
+                                                        height: 22,
+                                                        justifyContent: "center",
+                                                        width: 22,
+                                                    }, children: _jsx(Info, { style: { width: 12, height: 12, color: "#D98A1C" } }) }), _jsxs("div", { style: {
+                                                        display: "flex",
+                                                        flexDirection: "column",
+                                                        alignItems: "flex-start",
+                                                        minWidth: 0,
+                                                    }, children: [_jsx("span", { style: {
+                                                                fontFamily: '"Geist", system-ui, sans-serif',
+                                                                fontWeight: 600,
+                                                                fontSize: 13,
+                                                                color: "#161615",
+                                                                lineHeight: "20px",
+                                                            }, children: "Tokens below minimum" }), _jsx("span", { style: {
+                                                                fontFamily: '"Geist", system-ui, sans-serif',
+                                                                fontSize: 12,
+                                                                color: "#848483",
+                                                                lineHeight: "18px",
+                                                                textAlign: "left",
+                                                            }, children: showBelowMin
+                                                                ? "Tokens under $1 are unavailable for swaps"
+                                                                : "Hidden to prevent failed swaps" })] })] }), _jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [_jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [belowMin.slice(0, 3).map((t, i) => t.logo ? (_jsx("img", { alt: "", src: t.logo, style: {
+                                                                width: 18,
+                                                                height: 18,
+                                                                borderRadius: "999px",
+                                                                objectFit: "cover",
+                                                                marginLeft: i > 0 ? -6 : 0,
+                                                                border: "1.5px solid #fff",
+                                                            } }, `bm-${t.contractAddress}-${t.chainId}`)) : (_jsx("div", { style: {
+                                                                width: 18,
+                                                                height: 18,
+                                                                borderRadius: "999px",
+                                                                backgroundColor: "#E8E8E7",
+                                                                marginLeft: i > 0 ? -6 : 0,
+                                                                border: "1.5px solid #fff",
+                                                            } }, `bm-${t.contractAddress}-${t.chainId}`))), belowMin.length > 3 && (_jsxs("div", { style: {
+                                                                width: 18,
+                                                                height: 18,
+                                                                borderRadius: "999px",
+                                                                backgroundColor: "#161615",
+                                                                display: "flex",
+                                                                alignItems: "center",
+                                                                justifyContent: "center",
+                                                                fontSize: 9,
+                                                                fontWeight: 700,
+                                                                color: "#fff",
+                                                                marginLeft: -6,
+                                                                border: "1.5px solid #fff",
+                                                            }, children: ["+", belowMin.length - 3] }))] }), showBelowMin ? (_jsx(ChevronUp, { style: { width: 18, height: 18, color: "#848483" } })) : (_jsx(ChevronDown, { style: { width: 18, height: 18, color: "#848483" } }))] })] }), _jsx("div", { "aria-hidden": !showBelowMin, style: {
+                                        borderTop: showBelowMin
+                                            ? "1px solid #F0F0EF"
+                                            : "0px solid transparent",
+                                        display: "grid",
+                                        gridTemplateRows: showBelowMin ? "1fr" : "0fr",
+                                        opacity: showBelowMin ? 1 : 0,
+                                        overflow: "hidden",
+                                        transition: "grid-template-rows 240ms ease, opacity 180ms ease, border-top-width 240ms ease",
+                                    }, children: _jsx("div", { style: { minHeight: 0, overflow: "hidden" }, children: belowMin.map((token, index) => (_jsxs("div", { style: {
+                                                display: "flex",
+                                                alignItems: "center",
+                                                justifyContent: "space-between",
+                                                borderTop: index === 0 ? "none" : "1px solid #F0F0EF",
+                                                opacity: 0.58,
+                                                padding: "8px 12px",
+                                            }, children: [_jsxs("div", { style: {
+                                                        display: "flex",
+                                                        alignItems: "center",
+                                                        gap: 9,
+                                                        minWidth: 0,
+                                                    }, children: [_jsxs("div", { style: {
+                                                                position: "relative",
+                                                                width: 22,
+                                                                height: 22,
+                                                                flexShrink: 0,
+                                                            }, children: [token.logo ? (_jsx("img", { alt: token.symbol, src: token.logo, style: {
+                                                                        filter: "grayscale(0.2)",
+                                                                        width: 22,
+                                                                        height: 22,
+                                                                        borderRadius: "999px",
+                                                                        objectFit: "cover",
+                                                                    } })) : (_jsx("div", { style: {
+                                                                        width: 22,
+                                                                        height: 22,
+                                                                        borderRadius: "999px",
+                                                                        backgroundColor: "#C8C8C7",
+                                                                        display: "flex",
+                                                                        alignItems: "center",
+                                                                        justifyContent: "center",
+                                                                        color: "#fff",
+                                                                        fontSize: 9,
+                                                                        fontWeight: 700,
+                                                                    }, children: token.symbol.slice(0, 2) })), token.chainLogo && (_jsx("img", { alt: "", src: token.chainLogo, style: {
+                                                                        border: "1.5px solid #FFFFFE",
+                                                                        borderRadius: "999px",
+                                                                        bottom: -2,
+                                                                        filter: "grayscale(0.2)",
+                                                                        height: 10,
+                                                                        objectFit: "cover",
+                                                                        position: "absolute",
+                                                                        right: -2,
+                                                                        width: 10,
+                                                                    } }))] }), _jsxs("span", { style: {
+                                                                fontFamily: '"Geist", system-ui, sans-serif',
+                                                                fontWeight: 500,
+                                                                fontSize: 12,
+                                                                color: "#848483",
+                                                                lineHeight: "18px",
+                                                                minWidth: 0,
+                                                                overflow: "hidden",
+                                                                textOverflow: "ellipsis",
+                                                                whiteSpace: "nowrap",
+                                                            }, children: [token.symbol, " on", " ", token.chainName || "Unknown chain"] })] }), _jsx("span", { style: {
+                                                        fontFamily: '"Geist", system-ui, sans-serif',
+                                                        fontSize: 12,
+                                                        color: "#848483",
+                                                        fontWeight: 500,
+                                                        lineHeight: "18px",
+                                                        flexShrink: 0,
+                                                        marginLeft: 12,
+                                                    }, children: token.balanceInFiat })] }, `${token.contractAddress}-${token.chainId}`))) }) })] }))] })) }), isMulti && (_jsxs("div", { style: { flexShrink: 0, paddingBottom: 6, marginTop: "auto" }, children: [shouldShowSelectionProgress && requiredUsdAmount && (_jsxs("div", { style: {
+                            borderTop: "1px solid #E8E8E7",
+                            boxSizing: "border-box",
+                            marginBottom: 12,
+                            paddingTop: 12,
+                        }, children: [_jsxs("div", { style: {
+                                    alignItems: "baseline",
+                                    display: "flex",
+                                    justifyContent: "space-between",
+                                    marginBottom: 8,
+                                }, children: [_jsx("span", { style: {
+                                            color: "#848483",
+                                            fontFamily: '"Geist", system-ui, sans-serif',
+                                            fontSize: 13,
+                                            lineHeight: "20px",
+                                        }, children: "Required" }), _jsxs("span", { style: {
+                                            color: "#848483",
+                                            fontFamily: '"Geist", system-ui, sans-serif',
+                                            fontSize: 13,
+                                            lineHeight: "20px",
+                                        }, children: [_jsx("strong", { style: { color: "#161615", fontWeight: 600 }, children: formatUsdBalanceLabel(selectionDeficitUsdAmount) }), " ", "more"] })] }), _jsx("div", { style: {
+                                    backgroundColor: "#F0F0EF",
+                                    borderRadius: "999px",
+                                    height: 6,
+                                    overflow: "hidden",
+                                    width: "100%",
+                                }, children: _jsx("div", { style: {
+                                        backgroundColor: brand,
+                                        borderRadius: "999px",
+                                        height: "100%",
+                                        transition: "width 240ms ease",
+                                        width: `${selectionProgressPercent}%`,
+                                    } }) })] })), !shouldShowSelectionProgress && (_jsx("button", { onClick: handleDone, style: {
+                            width: "100%",
+                            height: 48,
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            backgroundColor: "#1F1F1F",
+                            color: "#FFFFFE",
+                            border: "none",
+                            borderRadius: 14,
+                            cursor: "pointer",
+                            fontFamily: '"Geist", system-ui, sans-serif',
+                            fontSize: 16,
+                            fontWeight: 600,
+                            boxShadow: "0px 1px 4px 0px #5555550D",
+                        }, children: "Done" }))] })), showChainSelector &&
+                (() => {
+                    const chainModal = (_jsxs("div", { style: {
+                            bottom: 0,
+                            display: "flex",
+                            flexDirection: "column",
+                            justifyContent: "flex-end",
+                            left: 0,
+                            pointerEvents: "none",
+                            position: "absolute",
+                            right: 0,
+                            top: 0,
+                            zIndex: 50,
+                        }, children: [_jsx("div", { onClick: closeChainSelector, style: {
+                                    backgroundColor: "rgba(0,0,0,0.22)",
+                                    bottom: 0,
+                                    left: 0,
+                                    pointerEvents: "auto",
+                                    position: "absolute",
+                                    right: 0,
+                                    top: 0,
+                                    opacity: isChainSelectorClosing ? 0 : 1,
+                                    transition: `opacity ${CHAIN_SELECTOR_CLOSE_MS}ms ease`,
+                                } }), _jsxs("div", { className: isChainSelectorClosing
+                                    ? undefined
+                                    : "animate-in slide-in-from-bottom-full duration-300", "data-nexus-widget-sheet": true, style: {
+                                    ...modalHeightTransitionStyle,
+                                    backgroundColor: "#FFFFFE",
+                                    borderRadius: "24px 24px 0 0",
+                                    boxShadow: "0 -4px 16px rgba(0,0,0,0.08)",
+                                    boxSizing: "border-box",
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    height: "90%",
+                                    maxHeight: "90%",
+                                    overflow: "hidden",
+                                    padding: "12px",
+                                    pointerEvents: "auto",
+                                    position: "relative",
+                                    transform: isChainSelectorClosing
+                                        ? "translateY(100%)"
+                                        : "translateY(0)",
+                                    transition: `${modalHeightTransition}, transform ${CHAIN_SELECTOR_CLOSE_MS}ms ease, opacity ${CHAIN_SELECTOR_CLOSE_MS}ms ease`,
+                                    opacity: isChainSelectorClosing ? 0 : 1,
+                                    willChange: "height, max-height, transform, opacity",
+                                    width: "100%",
+                                }, children: [_jsx("div", { style: {
+                                            display: "flex",
+                                            justifyContent: "center",
+                                            marginBottom: 8,
+                                            width: "100%",
+                                        }, children: _jsx("div", { style: {
+                                                backgroundColor: "#D8D8D6",
+                                                borderRadius: "999px",
+                                                height: 4,
+                                                width: 32,
+                                            } }) }), _jsxs("div", { style: {
+                                            alignItems: "center",
+                                            display: "flex",
+                                            gap: 10,
+                                            marginBottom: 10,
+                                        }, children: [_jsx("button", { onClick: closeChainSelector, style: {
+                                                    width: 30,
+                                                    height: 30,
+                                                    borderRadius: 8,
+                                                    border: "1px solid #E8E8E7",
+                                                    display: "flex",
+                                                    alignItems: "center",
+                                                    justifyContent: "center",
+                                                    backgroundColor: "#FFFFFE",
+                                                    cursor: "pointer",
+                                                    flexShrink: 0,
+                                                }, children: _jsx(ChevronDown, { style: {
+                                                        width: 15,
+                                                        height: 15,
+                                                        transform: "rotate(90deg)",
+                                                    } }) }), _jsx("span", { style: {
+                                                    color: "#161615",
+                                                    fontFamily: '"Geist", system-ui, sans-serif',
+                                                    fontSize: 17,
+                                                    fontWeight: 600,
+                                                }, children: "Select chain" })] }), _jsx("div", { style: { paddingBottom: 10 }, children: _jsxs("div", { style: {
+                                                display: "flex",
+                                                alignItems: "center",
+                                                height: 38,
+                                                gap: 8,
+                                                borderRadius: 11,
+                                                border: `1px solid ${isChainSearchFocused ? "#A8C9FF" : "#E8E8E7"}`,
+                                                padding: "0 12px",
+                                                backgroundColor: "#FFFFFE",
+                                                boxShadow: isChainSearchFocused
+                                                    ? "0 0 0 1px rgba(0,107,244,0.16)"
+                                                    : "none",
+                                            }, children: [_jsx(Search, { style: {
+                                                        width: 18,
+                                                        height: 18,
+                                                        color: "#848483",
+                                                        flexShrink: 0,
+                                                    } }), _jsx("input", { onBlur: () => setIsChainSearchFocused(false), onChange: (e) => setChainQuery(e.target.value), onFocus: () => setIsChainSearchFocused(true), placeholder: "Search chains", style: {
+                                                        flex: 1,
+                                                        backgroundColor: "transparent",
+                                                        border: "none",
+                                                        outline: "none",
+                                                        fontFamily: '"Geist", system-ui, sans-serif',
+                                                        fontSize: 13,
+                                                        color: "#161615",
+                                                    }, value: chainQuery })] }) }), _jsx("div", { style: {
+                                            flex: "1 1 auto",
+                                            marginBottom: 10,
+                                            minHeight: 0,
+                                            overflowY: "auto",
+                                        }, children: _jsxs("div", { style: {
+                                                border: "1px solid #E8E8E7",
+                                                borderRadius: 12,
+                                                overflow: "hidden",
+                                                backgroundColor: "#FFFFFE",
+                                            }, children: [_jsxs("button", { onClick: () => {
+                                                        setSelectedChainFilter(null);
+                                                        closeChainSelector();
+                                                    }, style: {
+                                                        width: "100%",
+                                                        display: "flex",
+                                                        alignItems: "center",
+                                                        padding: "8px 14px",
+                                                        backgroundColor: "transparent",
+                                                        border: "none",
+                                                        borderBottom: "1px solid #F0F0EF",
+                                                        cursor: "pointer",
+                                                        boxSizing: "border-box",
+                                                    }, children: [_jsx(RadioDot, { selected: selectedChainFilter === null }), _jsx(Globe, { style: {
+                                                                marginLeft: 10,
+                                                                width: 28,
+                                                                height: 28,
+                                                                color: "#161615",
+                                                                flexShrink: 0,
+                                                            } }), _jsx("span", { style: {
+                                                                fontFamily: '"Geist", system-ui, sans-serif',
+                                                                fontSize: 14,
+                                                                fontWeight: 500,
+                                                                marginLeft: 10,
+                                                                color: "#161615",
+                                                            }, children: "All Chains" })] }), chainOptions
+                                                    .filter((t) => (t.chainName || "")
+                                                    .toLowerCase()
+                                                    .includes(chainQuery.toLowerCase()))
+                                                    .map((t) => (_jsxs("button", { onClick: () => {
+                                                        setSelectedChainFilter(t.chainId);
+                                                        closeChainSelector();
+                                                    }, style: {
+                                                        width: "100%",
+                                                        display: "flex",
+                                                        alignItems: "center",
+                                                        padding: "8px 14px",
+                                                        backgroundColor: "transparent",
+                                                        border: "none",
+                                                        borderBottom: "1px solid #F0F0EF",
+                                                        cursor: "pointer",
+                                                        boxSizing: "border-box",
+                                                    }, children: [_jsx(RadioDot, { selected: selectedChainFilter === t.chainId }), _jsx("img", { alt: t.chainName, src: t.chainLogo, style: {
+                                                                marginLeft: 10,
+                                                                width: 28,
+                                                                height: 28,
+                                                                borderRadius: "999px",
+                                                                objectFit: "cover",
+                                                            } }), _jsx("span", { style: {
+                                                                fontFamily: '"Geist", system-ui, sans-serif',
+                                                                fontSize: 14,
+                                                                fontWeight: 500,
+                                                                marginLeft: 10,
+                                                                color: "#161615",
+                                                            }, children: t.chainName })] }, `chain-${t.chainId}`)))] }) })] })] }));
+                    return portalRoot ? createPortal(chainModal, portalRoot) : chainModal;
+                })()] }));
+}