@avail-project/widgets 2.0.0 → 2.0.2

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

@@ -4,7 +4,7 @@ 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 React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
 import { createPortal } from "react-dom";
 import { CHAIN_METADATA, getSdkSwapSupportedChainIds, getShortChainName, isSwapSupportedBySdkChainList, } from "../../common/utils/constant";
 const tabularNums = {
@@ -79,6 +79,44 @@ const SelectionControl = ({ selected, indeterminate = false, multi, }) => {
             width: 20,
         }, children: [selected && (_jsx(Check, { style: { color: "#FFFFFE", height: 14, width: 14 } })), !selected && indeterminate && (_jsx(Minus, { style: { color: "#FFFFFE", height: 14, width: 14 } }))] }));
 };
+function TokenLogo({ src, label, size, fontSize, style, fallbackBackground = brand, fallbackColor = "#FFFFFE", }) {
+    const normalizedSrc = src?.trim();
+    const [failed, setFailed] = useState(!normalizedSrc);
+    useEffect(() => {
+        setFailed(!normalizedSrc);
+    }, [normalizedSrc]);
+    if (!failed && normalizedSrc) {
+        return (_jsx("img", { alt: label || "", onError: () => setFailed(true), src: normalizedSrc, style: {
+                borderRadius: "999px",
+                height: size,
+                objectFit: "cover",
+                width: size,
+                ...style,
+            } }));
+    }
+    return (_jsx("div", { style: {
+            alignItems: "center",
+            backgroundColor: fallbackBackground,
+            borderRadius: "999px",
+            color: fallbackColor,
+            display: "flex",
+            flexShrink: 0,
+            fontFamily: '"Geist", system-ui, sans-serif',
+            fontSize,
+            fontWeight: 700,
+            height: size,
+            justifyContent: "center",
+            width: size,
+            ...style,
+        }, children: (label || "?").slice(0, 2).toUpperCase() }));
+}
+const getChainLogo = (token) => {
+    if (!token)
+        return undefined;
+    return token.chainId
+        ? (CHAIN_METADATA[token.chainId]?.logo ?? token.chainLogo)
+        : token.chainLogo;
+};
 /* ── Chain logo cluster ── */
 const ChainLogos = ({ tokens }) => {
     const clusterRef = useRef(null);
@@ -94,7 +132,7 @@ const ChainLogos = ({ tokens }) => {
                 seen.add(t.chainId);
                 out.push({
                     id: t.chainId,
-                    logo: t.chainLogo,
+                    logo: getChainLogo(t),
                     name: getShortChainName(t.chainId, t.chainName),
                     balance: t.balance,
                     balanceInFiat: t.balanceInFiat,
@@ -186,17 +224,7 @@ const ChainLogos = ({ tokens }) => {
                                 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: {
+                            }, children: [_jsx(TokenLogo, { fallbackBackground: "#E8E8E7", fallbackColor: "#161615", fontSize: 8, label: chain.name, size: 16, src: chain.logo }), _jsx("span", { style: {
                                         color: "#363635",
                                         fontFamily: '"Geist", system-ui, sans-serif',
                                         fontSize: 13,
@@ -218,18 +246,7 @@ const ChainLogos = ({ tokens }) => {
             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: {
+        }, children: [tooltip, shown.map((c) => (_jsx(TokenLogo, { fallbackBackground: "#E8E8E7", fallbackColor: "#161615", fontSize: 8, label: c.name, size: 16, src: c.logo, style: { border: "1px solid #fff" } }, c.id))), _jsxs("span", { style: {
                     fontFamily: '"Geist", system-ui, sans-serif',
                     fontSize: 12,
                     color: "#848483",
@@ -327,7 +344,7 @@ function isNativeToken(t) {
         return chain.includes("solana");
     return false;
 }
-const MIN_FIAT_THRESHOLD = 0;
+const MIN_FIAT_THRESHOLD = 1;
 const CHAIN_SELECTOR_CLOSE_MS = 220;
 const MODAL_HEIGHT_TRANSITION_MS = 260;
 const modalHeightTransitionStyle = {
@@ -372,6 +389,8 @@ export const compareChainsBySwapDisplayOrder = (a, b) => {
 const UNIFIED_MAINNET_CHAIN_IDS = new Set([
     1, 10, 56, 137, 143, 999, 4114, 8217, 8453, 42161, 43114, 534352, 4326,
 ]);
+const UNIFIED_USDC_SYMBOL_KEYS = new Set(["USDC", "USDCE", "USDM"]);
+const UNIFIED_USDT_SYMBOL_KEYS = new Set(["USDT", "USDT0", "USDTE"]);
 const escapeRegExp = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 const getTokenFiatValue = (token) => {
     const parsed = Number(String(token.balanceInFiat ?? "").replace(/[^0-9.]/g, "") || 0);
@@ -626,9 +645,9 @@ function getUnifiedSymbol(token) {
         return null;
     }
     const symbol = normalizeTokenGroupSymbol(token.symbol);
-    if (symbol.includes("USDC") || symbol === "USDM")
+    if (UNIFIED_USDC_SYMBOL_KEYS.has(symbol))
         return "USDC";
-    if (symbol.includes("USDT"))
+    if (UNIFIED_USDT_SYMBOL_KEYS.has(symbol))
         return "USDT";
     if (symbol === "ETH")
         return "ETH";
@@ -702,6 +721,8 @@ export function SwapAssetSelector({ title, swapBalance, swapSupportedChains, sta
     const [selectedChainFilter, setSelectedChainFilter] = useState(null);
     const [isChainSearchFocused, setIsChainSearchFocused] = useState(false);
     const stableListHeightRef = useRef(0);
+    const pendingSelectionScrollTopRef = useRef(null);
+    const skipNextSelectionScrollResetRef = useRef(false);
     const [stableListHeight, setStableListHeight] = useState(null);
     const lockedSelectedTokens = useMemo(() => dedupeTokenOptions(lockedTokens), [lockedTokens]);
     const isLockedToken = useCallback((token) => lockedSelectedTokens.some((locked) => sameTokenOption(locked, token)), [lockedSelectedTokens]);
@@ -716,7 +737,6 @@ export function SwapAssetSelector({ title, swapBalance, swapSupportedChains, sta
         const next = mergeTokenOptions(tokens, lockedSelectedTokens);
         if (isMulti) {
             setDraftSelectedTokens(next);
-            return;
         }
         onSelectionChange?.(next);
     }, [isMulti, lockedSelectedTokens, onSelectionChange]);
@@ -734,10 +754,23 @@ export function SwapAssetSelector({ title, swapBalance, swapSupportedChains, sta
             : normalizedInitialFilterTab);
     }, [normalizedInitialFilterTab]);
     useEffect(() => {
+        if (skipNextSelectionScrollResetRef.current) {
+            skipNextSelectionScrollResetRef.current = false;
+            return;
+        }
         if (listRef.current) {
             listRef.current.scrollTop = 0;
         }
     }, [query, activeTab, selectedChainFilter]);
+    useLayoutEffect(() => {
+        const pendingScrollTop = pendingSelectionScrollTopRef.current;
+        if (pendingScrollTop === null)
+            return;
+        if (listRef.current) {
+            listRef.current.scrollTop = pendingScrollTop;
+        }
+        pendingSelectionScrollTopRef.current = null;
+    }, [draftSelectedTokens]);
     const allTokens = useMemo(() => {
         const isSwapSupportedToken = (token) => isSwapSupportedBySdkChainList(token.chainId, swapSupportedChains);
         const baseTokens = staticOptions
@@ -783,7 +816,7 @@ export function SwapAssetSelector({ title, swapBalance, swapSupportedChains, sta
         if (showBelowMinimumInline) {
             return mergeTokenOptions(result, lockedSelectedTokens);
         }
-        return mergeTokenOptions(result.filter((token) => getTokenFiatValue(token) >= MIN_FIAT_THRESHOLD), lockedSelectedTokens.filter((token) => getTokenFiatValue(token) >= MIN_FIAT_THRESHOLD));
+        return mergeTokenOptions(result.filter((token) => getTokenFiatValue(token) >= MIN_FIAT_THRESHOLD), lockedSelectedTokens);
     }, [allTokens, lockedSelectedTokens, selectedChainFilter]);
     const selectionMatchesFilterTab = useCallback((tab) => {
         if (tab === "custom")
@@ -833,12 +866,14 @@ export function SwapAssetSelector({ title, swapBalance, swapSupportedChains, sta
         return result;
     }, [activeTab, allTokens, autoSelectFilterTabs, query, selectedChainFilter]);
     const isTokenSelectedForVisibility = useCallback((token) => {
+        if (isLockedToken(token))
+            return true;
         if (!preserveSelectedBelowMinimum)
             return false;
         return activeSelectedTokens.some((selected) => sameTokenOption(selected, token) ||
             Boolean(selected.isUnified &&
                 selected.sourceTokens?.some((source) => sameTokenOption(source, token))));
-    }, [activeSelectedTokens, preserveSelectedBelowMinimum]);
+    }, [activeSelectedTokens, isLockedToken, preserveSelectedBelowMinimum]);
     const isUnifiedSelectedForVisibility = useCallback((symbol) => preserveSelectedBelowMinimum &&
         activeSelectedTokens.some((selected) => selected.isUnified && selected.unifiedSymbol === symbol), [activeSelectedTokens, preserveSelectedBelowMinimum]);
     /* Split into above/below minimum */
@@ -864,7 +899,8 @@ export function SwapAssetSelector({ title, swapBalance, swapSupportedChains, sta
             const unifiedSym = allowUnified ? getUnifiedSymbol(token) : null;
             if (!showBelowMinimumInline &&
                 unifiedSym &&
-                getTokenFiatValue(token) < MIN_FIAT_THRESHOLD) {
+                getTokenFiatValue(token) < MIN_FIAT_THRESHOLD &&
+                !isTokenSelectedForVisibility(token)) {
                 continue;
             }
             const key = unifiedSym ?? `${token.contractAddress}-${token.chainId}`;
@@ -996,9 +1032,111 @@ export function SwapAssetSelector({ title, swapBalance, swapSupportedChains, sta
         return relevantTokens.some((st) => group.tokens.some((gt) => sameTokenOption(gt, st)) ||
             (st.isUnified && st.unifiedSymbol === group.symbol));
     };
+    const selectorRows = useMemo(() => {
+        if (isMulti) {
+            return groupedFiltered.map((group) => ({
+                fiat: group.totalFiat,
+                group,
+                key: `group:${group.symbol}`,
+                kind: "group",
+                label: group.symbol,
+                searchScore: query.trim()
+                    ? Math.min(...group.tokens.map((token) => getTokenSearchRank(token, query)?.score ??
+                        Number.MAX_SAFE_INTEGER))
+                    : 0,
+            }));
+        }
+        const rows = [];
+        const hasQuery = Boolean(query.trim());
+        const getSearchScore = (token) => hasQuery
+            ? (getTokenSearchRank(token, query)?.score ?? Number.MAX_SAFE_INTEGER)
+            : 0;
+        const isVisibleTokenRow = (token) => showBelowMinimumInline ||
+            getTokenFiatValue(token) >= MIN_FIAT_THRESHOLD ||
+            isTokenSelectedForVisibility(token) ||
+            isPrioritySearchMatch(token, query);
+        for (const group of groupedFiltered) {
+            if (!group.isUnifiedCandidate) {
+                for (const token of group.tokens) {
+                    if (!isVisibleTokenRow(token))
+                        continue;
+                    rows.push({
+                        fiat: getTokenFiatValue(token),
+                        key: `token:${token.chainId}:${token.contractAddress}`,
+                        kind: "token",
+                        label: `${token.symbol} ${token.chainName}`,
+                        searchScore: getSearchScore(token),
+                        token,
+                    });
+                }
+                continue;
+            }
+            const unifiedSelectedInOther = isGroupUnifiedSelectedInOtherSlot(group);
+            const unifiedSelectedInCurrent = isGroupUnifiedSelectedInCurrentSlot(group);
+            const anyIndividualSelectedInOther = isAnyTokenInGroupSelectedInOtherSlot(group);
+            const anyIndividualSelectedInCurrent = group.tokens.some(isTokenSelectedInCurrentSlot);
+            const shouldHideUnifiedRow = anyIndividualSelectedInOther ||
+                anyIndividualSelectedInCurrent ||
+                (group.totalFiat < MIN_FIAT_THRESHOLD &&
+                    !isUnifiedSelectedForVisibility(group.symbol));
+            const shouldHideIndividualRows = unifiedSelectedInOther || unifiedSelectedInCurrent;
+            if (!unifiedSelectedInOther && !shouldHideUnifiedRow) {
+                rows.push({
+                    fiat: group.totalFiat,
+                    group,
+                    key: `group:${group.symbol}`,
+                    kind: "group",
+                    label: group.symbol,
+                    searchScore: hasQuery
+                        ? Math.min(...group.tokens.map((token) => getTokenSearchRank(token, query)?.score ??
+                            Number.MAX_SAFE_INTEGER))
+                        : 0,
+                });
+            }
+            if (!shouldHideIndividualRows) {
+                for (const token of group.tokens) {
+                    if (!isVisibleTokenRow(token))
+                        continue;
+                    rows.push({
+                        fiat: getTokenFiatValue(token),
+                        key: `token:${token.chainId}:${token.contractAddress}`,
+                        kind: "token",
+                        label: `${token.symbol} ${token.chainName}`,
+                        searchScore: getSearchScore(token),
+                        token,
+                    });
+                }
+            }
+        }
+        return rows.sort((a, b) => {
+            if (hasQuery && a.searchScore !== b.searchScore) {
+                return a.searchScore - b.searchScore;
+            }
+            if (a.fiat !== b.fiat)
+                return b.fiat - a.fiat;
+            if (a.kind !== b.kind)
+                return a.kind === "group" ? -1 : 1;
+            return a.label.localeCompare(b.label);
+        });
+    }, [
+        groupedFiltered,
+        isMulti,
+        isGroupUnifiedSelectedInCurrentSlot,
+        isGroupUnifiedSelectedInOtherSlot,
+        isAnyTokenInGroupSelectedInOtherSlot,
+        isTokenSelectedInCurrentSlot,
+        isTokenSelectedForVisibility,
+        isUnifiedSelectedForVisibility,
+        query,
+        showBelowMinimumInline,
+    ]);
     const handleFilterTabClick = (tab) => {
         setActiveTab(tab);
         if (autoSelectFilterTabs && isMulti && tab !== "custom") {
+            if (tab === "all" && onFilterTabSelect) {
+                onFilterTabSelect(tab);
+                return;
+            }
             if (filterTabBehavior === "source-pool") {
                 onFilterTabSelect?.(tab);
                 return;
@@ -1021,6 +1159,8 @@ export function SwapAssetSelector({ title, swapBalance, swapSupportedChains, sta
             onToggle?.(token);
             return;
         }
+        pendingSelectionScrollTopRef.current = listRef.current?.scrollTop ?? null;
+        skipNextSelectionScrollResetRef.current = true;
         setActiveTab("custom");
         const current = mergeTokenOptions(activeSelectedTokens, lockedSelectedTokens);
         const targets = token.isUnified && token.sourceTokens?.length
@@ -1069,25 +1209,7 @@ export function SwapAssetSelector({ title, swapBalance, swapSupportedChains, sta
                 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: {
+            }, 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: _jsx(TokenLogo, { fontSize: 14, label: token.symbol, size: 40, src: token.logo }) }), _jsxs("div", { style: {
                                 display: "flex",
                                 flexDirection: "column",
                                 alignItems: "flex-start",
@@ -1096,12 +1218,7 @@ export function SwapAssetSelector({ title, swapBalance, swapSupportedChains, sta
                                         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: {
+                                    }, children: token.symbol }), token.chainName && (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [_jsx(TokenLogo, { fallbackBackground: "#E8E8E7", fallbackColor: "#161615", fontSize: 7, label: token.chainName, size: 14, src: getChainLogo(token) }), _jsx("span", { style: {
                                                 fontFamily: '"Geist", system-ui, sans-serif',
                                                 fontSize: 13,
                                                 color: "#848483",
@@ -1121,7 +1238,7 @@ export function SwapAssetSelector({ title, swapBalance, swapSupportedChains, sta
                             }, children: ["\u2248 ", token.balanceInFiat] })] })] }, `${token.contractAddress}-${token.chainId}`));
     };
     /* ── Render a unified (multi-chain) group row ── */
-    const renderGroupRow = (group) => {
+    const renderGroupRow = (group, includeIndividualRows = true) => {
         if (!group.isUnifiedCandidate) {
             return group.tokens
                 .filter((token) => getTokenFiatValue(token) >= MIN_FIAT_THRESHOLD ||
@@ -1196,25 +1313,7 @@ export function SwapAssetSelector({ title, swapBalance, swapSupportedChains, sta
                                         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: {
+                                    }, children: _jsx(TokenLogo, { fontSize: 14, label: group.symbol, size: 40, src: group.logo }) }), _jsxs("div", { style: {
                                         display: "flex",
                                         flexDirection: "column",
                                         alignItems: "flex-start",
@@ -1251,31 +1350,33 @@ export function SwapAssetSelector({ title, swapBalance, swapSupportedChains, sta
                         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 &&
+                    }, children: _jsx("div", { style: { overflow: "hidden" }, children: group.tokens.map((token) => renderTokenRow(token, true, false)) }) })) : (includeIndividualRows &&
+                    !shouldHideIndividualRows &&
                     individualTokens.map((token) => renderTokenRow(token)))] }, group.symbol));
     };
     const isLoading = !staticOptions && swapBalance === null;
     const selectedAssetCount = activeSelectedTokens.length;
     const requiredUsdAmount = parseTokenAmount(requiredUsd);
+    const shouldCountSelectedUsd = (token, value) => value.gt(0) && (isLockedToken(token) || value.gte(MIN_FIAT_THRESHOLD));
     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)
+                return shouldCountSelectedUsd(source, value)
                     ? 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;
+        return shouldCountSelectedUsd(token, value) ? sum.plus(value) : sum;
     }, new Decimal(0));
     const selectionDeficitUsdAmount = requiredUsdAmount && selectedUsdAmount.lt(requiredUsdAmount)
         ? requiredUsdAmount.minus(selectedUsdAmount)
         : new Decimal(0);
-    const shouldShowSelectionProgress = Boolean(isMulti &&
-        requiredUsdAmount &&
+    const hasSelectionShortfall = Boolean(requiredUsdAmount &&
         requiredUsdAmount.gt(0) &&
         selectionDeficitUsdAmount.gt(0));
+    const shouldShowSelectionProgress = Boolean(isMulti && hasSelectionShortfall);
     const selectionProgressPercent = shouldShowSelectionProgress && requiredUsdAmount
         ? Decimal.min(100, selectedUsdAmount.div(requiredUsdAmount).mul(100)).toNumber()
         : 0;
@@ -1331,7 +1432,7 @@ export function SwapAssetSelector({ title, swapBalance, swapSupportedChains, sta
                 balanceInFiat: "$0.00",
                 chainId: chain.id,
                 chainName: getShortChainName(chain.id, chain.name),
-                chainLogo: chain.logo,
+                chainLogo: CHAIN_METADATA[chain.id]?.logo ?? chain.logo,
             });
         }
         for (const token of allTokens) {
@@ -1354,10 +1455,11 @@ export function SwapAssetSelector({ title, swapBalance, swapSupportedChains, sta
         ? "All chains"
         : selectedChainToken?.chainName || "Chain";
     const handleDone = () => {
-        if (isMulti && onSelectionChange) {
-            onSelectionChange(mergeTokenOptions(draftSelectedTokens, lockedSelectedTokens));
-        }
-        onDone?.();
+        if (hasSelectionShortfall)
+            return;
+        onDone?.(isMulti
+            ? mergeTokenOptions(draftSelectedTokens, lockedSelectedTokens)
+            : undefined);
     };
     return (_jsxs("div", { ref: selectorRef, style: {
             ...modalHeightTransitionStyle,
@@ -1470,13 +1572,7 @@ export function SwapAssetSelector({ title, swapBalance, swapSupportedChains, sta
                                         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: {
+                                    } })) : (_jsx(TokenLogo, { fallbackBackground: "#E8E8E7", fallbackColor: "#161615", fontSize: 9, label: selectedChainLabel, size: 18, src: getChainLogo(selectedChainToken) })), _jsx("span", { style: {
                                         color: "#161615",
                                         fontFamily: '"Geist", system-ui, sans-serif',
                                         fontSize: "14px",
@@ -1539,9 +1635,9 @@ export function SwapAssetSelector({ title, swapBalance, swapSupportedChains, sta
                                 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: {
+                            }, children: selectorRows.map((row) => row.kind === "group"
+                                ? renderGroupRow(row.group, isMulti)
+                                : renderTokenRow(row.token)) })), belowMin.length > 0 && (_jsxs("div", { style: {
                                 backgroundColor: "#FFFFFE",
                                 border: "1px solid #E8E8E7",
                                 borderRadius: 12,
@@ -1589,21 +1685,10 @@ export function SwapAssetSelector({ title, swapBalance, swapSupportedChains, sta
                                                                 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,
+                                                                : "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) => _jsx(TokenLogo, { fallbackBackground: "#E8E8E7", fallbackColor: "#161615", fontSize: 8, label: t.symbol, size: 18, src: t.logo, style: {
                                                                 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: {
+                                                            } }, `bm-${t.contractAddress}-${t.chainId}`)), belowMin.length > 3 && (_jsxs("div", { style: {
                                                                 width: 18,
                                                                 height: 18,
                                                                 borderRadius: "999px",
@@ -1642,33 +1727,12 @@ export function SwapAssetSelector({ title, swapBalance, swapSupportedChains, sta
                                                                 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: {
+                                                            }, children: [_jsx(TokenLogo, { fallbackBackground: "#C8C8C7", fontSize: 9, label: token.symbol, size: 22, src: token.logo, style: { filter: "grayscale(0.2)" } }), token.chainLogo && (_jsx(TokenLogo, { fallbackBackground: "#E8E8E7", fallbackColor: "#161615", fontSize: 5, label: token.chainName, size: 10, src: getChainLogo(token), 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,
@@ -1719,7 +1783,7 @@ export function SwapAssetSelector({ title, swapBalance, swapSupportedChains, sta
                                         height: "100%",
                                         transition: "width 240ms ease",
                                         width: `${selectionProgressPercent}%`,
-                                    } }) })] })), !shouldShowSelectionProgress && (_jsx("button", { onClick: handleDone, style: {
+                                    } }) })] })), !hasSelectionShortfall && (_jsx("button", { onClick: handleDone, style: {
                             width: "100%",
                             height: 48,
                             display: "flex",
@@ -1892,13 +1956,7 @@ export function SwapAssetSelector({ title, swapBalance, swapSupportedChains, sta
                                                         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: {
+                                                    }, children: [_jsx(RadioDot, { selected: selectedChainFilter === t.chainId }), _jsx(TokenLogo, { fallbackBackground: "#E8E8E7", fallbackColor: "#161615", fontSize: 10, label: t.chainName, size: 28, src: getChainLogo(t), style: { marginLeft: 10 } }), _jsx("span", { style: {
                                                                 fontFamily: '"Geist", system-ui, sans-serif',
                                                                 fontSize: 14,
                                                                 fontWeight: 500,

package/dist/nexus-widget/components/swap-idle-form.d.ts

@@ -4,6 +4,7 @@ interface SwapIdleFormProps {
     defaultRecipientAddress?: string;
     fromTokens: SwapTokenOption[];
     isAmountReadOnly?: boolean;
+    isBalanceLoading?: boolean;
     isDestinationPickerDisabled?: boolean;
     hideDestinationTokenDropdownIcon?: boolean;
     isReceiveAmountLoading?: boolean;
@@ -24,6 +25,6 @@ interface SwapIdleFormProps {
     totalBalance: string;
     usdValue: string;
 }
-export declare function SwapIdleForm({ amount, receiveQuoteAmount, receiveQuoteUsd, isReceiveAmountLoading, isReceiveUsdLoading, sourceRouteStatus, sourceRouteMessage, onAmountChange, fromTokens, toToken, totalBalance, usdValue, onOpenSourcePicker, onOpenDestPicker, onOpenRecipientPicker, recipientAddress, defaultRecipientAddress, swapType, onUpdateTokens, isAmountReadOnly, isDestinationPickerDisabled, hideDestinationTokenDropdownIcon, isSourcePickerDisabled, }: SwapIdleFormProps): import("react/jsx-runtime").JSX.Element;
+export declare function SwapIdleForm({ amount, receiveQuoteAmount, receiveQuoteUsd, isReceiveAmountLoading, isReceiveUsdLoading, sourceRouteStatus, sourceRouteMessage, onAmountChange, fromTokens, toToken, totalBalance, usdValue, onOpenSourcePicker, onOpenDestPicker, onOpenRecipientPicker, recipientAddress, defaultRecipientAddress, swapType, onUpdateTokens, isAmountReadOnly, isBalanceLoading, isDestinationPickerDisabled, hideDestinationTokenDropdownIcon, isSourcePickerDisabled, }: SwapIdleFormProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=swap-idle-form.d.ts.map

package/dist/nexus-widget/components/swap-idle-form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"swap-idle-form.d.ts","sourceRoot":"","sources":["../../../.build-src/nexus-widget/components/swap-idle-form.tsx"],"names":[],"mappings":"AAKA,OAAO,EAGL,KAAK,eAAe,EACrB,MAAM,uBAAuB,CAAC;AAS/B,UAAU,iBAAiB;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,UAAU,EAAE,eAAe,EAAE,CAAC;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC,gCAAgC,CAAC,EAAE,OAAO,CAAC;IAC3C,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IACjE,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,kBAAkB,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;IACrD,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,SAAS,GAAG,cAAc,CAAC;IAC/C,QAAQ,EAAE,SAAS,GAAG,UAAU,CAAC;IACjC,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;CAClB;AA8jBD,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,kBAAkB,EAClB,eAAe,EACf,sBAA8B,EAC9B,mBAA2B,EAC3B,iBAAiB,EACjB,kBAAkB,EAClB,cAAc,EACd,UAAU,EACV,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,kBAAkB,EAClB,gBAAgB,EAChB,qBAAqB,EACrB,gBAAgB,EAChB,uBAAuB,EACvB,QAAQ,EACR,cAAc,EACd,gBAAwB,EACxB,2BAAmC,EACnC,gCAAwC,EACxC,sBAA8B,GAC/B,EAAE,iBAAiB,2CAm9CnB"}
+{"version":3,"file":"swap-idle-form.d.ts","sourceRoot":"","sources":["../../../.build-src/nexus-widget/components/swap-idle-form.tsx"],"names":[],"mappings":"AAKA,OAAO,EAGL,KAAK,eAAe,EACrB,MAAM,uBAAuB,CAAC;AAS/B,UAAU,iBAAiB;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,UAAU,EAAE,eAAe,EAAE,CAAC;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC,gCAAgC,CAAC,EAAE,OAAO,CAAC;IAC3C,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IACjE,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,kBAAkB,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;IACrD,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,SAAS,GAAG,cAAc,CAAC;IAC/C,QAAQ,EAAE,SAAS,GAAG,UAAU,CAAC;IACjC,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;CAClB;AA8jBD,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,kBAAkB,EAClB,eAAe,EACf,sBAA8B,EAC9B,mBAA2B,EAC3B,iBAAiB,EACjB,kBAAkB,EAClB,cAAc,EACd,UAAU,EACV,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,kBAAkB,EAClB,gBAAgB,EAChB,qBAAqB,EACrB,gBAAgB,EAChB,uBAAuB,EACvB,QAAQ,EACR,cAAc,EACd,gBAAwB,EACxB,gBAAwB,EACxB,2BAAmC,EACnC,gCAAwC,EACxC,sBAA8B,GAC/B,EAAE,iBAAiB,2CAu9CnB"}

package/dist/nexus-widget/components/swap-idle-form.js

@@ -335,7 +335,7 @@ const formatAmountInputDisplay = (value) => {
         return value;
     }
 };
-export function SwapIdleForm({ amount, receiveQuoteAmount, receiveQuoteUsd, isReceiveAmountLoading = false, isReceiveUsdLoading = false, sourceRouteStatus, sourceRouteMessage, onAmountChange, fromTokens, toToken, totalBalance, usdValue, onOpenSourcePicker, onOpenDestPicker, onOpenRecipientPicker, recipientAddress, defaultRecipientAddress, swapType, onUpdateTokens, isAmountReadOnly = false, isDestinationPickerDisabled = false, hideDestinationTokenDropdownIcon = false, isSourcePickerDisabled = false, }) {
+export function SwapIdleForm({ amount, receiveQuoteAmount, receiveQuoteUsd, isReceiveAmountLoading = false, isReceiveUsdLoading = false, sourceRouteStatus, sourceRouteMessage, onAmountChange, fromTokens, toToken, totalBalance, usdValue, onOpenSourcePicker, onOpenDestPicker, onOpenRecipientPicker, recipientAddress, defaultRecipientAddress, swapType, onUpdateTokens, isAmountReadOnly = false, isBalanceLoading = false, isDestinationPickerDisabled = false, hideDestinationTokenDropdownIcon = false, isSourcePickerDisabled = false, }) {
     const [focusedPanel, setFocusedPanel] = useState(null);
     const [focusedRow, setFocusedRow] = useState(null);
     const [tooltip, setTooltip] = useState(null);
@@ -931,7 +931,7 @@ export function SwapIdleForm({ amount, receiveQuoteAmount, receiveQuoteUsd, isRe
                                                     justifyContent: "flex-end",
                                                     alignItems: "center",
                                                     flex: 1,
-                                                }, children: showSourceRouteSkeleton ? (_jsx(SkeletonBar, { height: "16px", width: "124px" })) : token ? (_jsxs("div", { onMouseEnter: (e) => {
+                                                }, children: showSourceRouteSkeleton || isBalanceLoading ? (_jsx(SkeletonBar, { height: "16px", width: "124px" })) : token ? (_jsxs("div", { onMouseEnter: (e) => {
                                                         setTooltip(`asset-send-${index}`);
                                                         setTooltipTriggerRect(e.currentTarget.getBoundingClientRect());
                                                     }, onMouseLeave: () => {
@@ -1196,7 +1196,7 @@ export function SwapIdleForm({ amount, receiveQuoteAmount, receiveQuoteUsd, isRe
                                                     fontVariantNumeric: "tabular-nums",
                                                     lineHeight: "16px",
                                                     whiteSpace: "nowrap",
-                                                }, children: receiveBalanceLabel }), tooltip === "asset-receive" && (_jsxs("div", { style: {
+                                                }, children: isBalanceLoading ? (_jsx(SkeletonBar, { height: "16px", width: "96px" })) : (receiveBalanceLabel) }), tooltip === "asset-receive" && (_jsxs("div", { style: {
                                                     position: "absolute",
                                                     right: 0,
                                                     bottom: "calc(100% + 8px)",