@stableflow/pay-widgets 0.2.0-beta-90dffc3d2f-20261012 → 0.2.0

package/dist/token-select/index.js

@@ -9,11 +9,29 @@ import { useSyncExternalStore } from "react";
 var TOKEN_BALANCE_POLL_MS = 6e4;
 var ALL_CHAIN_FILTER = "all";
 var DEFAULT_STABLE_SYMBOLS = ["USDT", "USDC"];
-var POPULAR_SECTION_TITLE = "Popular on your network";
 var TOKEN_SELECT_PREFS_STORAGE_KEY = "stableflow-pay:token-select-prefs:v1";
-var TOKEN_SELECT_PREFS_VERSION = 2;
+var TOKEN_SELECT_PREFS_VERSION = 3;
 var MAX_RECENT_BLOCKCHAINS = 16;
-var MAX_RECENT_ASSETS = 3;
+var MAX_RECENTLY_USED = 5;
+var MAX_RECENT_SEARCHES = 5;
+var MAX_RECENT_HISTORY = 50;
+var YOUR_TOKENS_TITLE = "Your Tokens";
+var RECENT_SEARCHES_TITLE = "Recent Searches";
+var TRENDS_TOKEN_TITLE = "Trends Token";
+var ALL_CHAIN_PREVIEW_BLOCKCHAINS = ["eth", "near", "sol", "tron"];
+var DESKTOP_MEDIA_QUERY = "(min-width: 768px)";
+var TRENDS_TOKENS = [
+  { blockchain: "tron", symbol: "USDT" },
+  { blockchain: "eth", symbol: "USDT" },
+  { blockchain: "eth", symbol: "USDC" },
+  { blockchain: "sol", symbol: "USDC" },
+  { blockchain: "sol", symbol: "USDT" },
+  { blockchain: "pol", symbol: "USDC" },
+  { blockchain: "bsc", symbol: "USDT" },
+  { blockchain: "arb", symbol: "USDT" },
+  { blockchain: "arb", symbol: "USDC" },
+  { blockchain: "near", symbol: "USDT" }
+];
 var CHAIN_KIND_LABELS = {
   evm: "EVM",
   near: "Near",
@@ -247,7 +265,6 @@ function PayWidgetsProvider(props) {
   const {
     tokens,
     loading = false,
-    popularTokens = [],
     wallet,
     readBalances,
     getBalance,
@@ -278,7 +295,6 @@ function PayWidgetsProvider(props) {
     tokens,
     loading,
     wallet,
-    popularTokens,
     stableSymbols,
     chainKindLabels,
     onCopyAddress,
@@ -297,17 +313,32 @@ function usePayWidgets() {
 }
 
 // src/token-select/TokenSelectDialog.tsx
-import { useEffect as useEffect3, useLayoutEffect, useMemo, useRef as useRef2, useState as useState2, useSyncExternalStore as useSyncExternalStore3 } from "react";
+import { useEffect as useEffect5, useMemo, useRef as useRef3, useState as useState4, useSyncExternalStore as useSyncExternalStore3 } from "react";
 import { Dialog } from "@stableflow/pay-ui/dialog";
-import { SearchInput } from "@stableflow/pay-ui/search-input";
+import { SearchInput as SearchInput2 } from "@stableflow/pay-ui/search-input";
 
-// src/token-select/chain-pane.tsx
-import { IconChevron } from "@stableflow/pay-ui/icons/chevron";
+// src/token-select/chain-select.tsx
+import { useEffect as useEffect3, useRef, useState as useState2 } from "react";
+import { IconCheck } from "@stableflow/pay-ui/icons/outline/check";
+import { IconChevron } from "@stableflow/pay-ui/icons/outline/chevron";
+import { Drawer } from "@stableflow/pay-ui/drawer";
+import { SearchInput } from "@stableflow/pay-ui/search-input";
 import { Tooltip } from "@stableflow/pay-ui/tooltip";
 
-// src/token-select/chain-wallet-status.tsx
-import { IconCopy } from "@stableflow/pay-ui/icons/copy";
-import { IconLogout } from "@stableflow/pay-ui/icons/logout";
+// src/token-select/chain-stack.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function ChainStack(props) {
+  const { chains, logoClassName } = props;
+  return /* @__PURE__ */ jsx2("span", { className: "grid grid-cols-2 gap-0.5", children: chains.slice(0, 4).map((chain) => /* @__PURE__ */ jsx2(
+    "img",
+    {
+      src: chain.logo,
+      alt: "",
+      className: logoClassName
+    },
+    chain.blockchain
+  )) });
+}
 
 // src/token-select/format.ts
 import { clsx } from "clsx";
@@ -317,12 +348,6 @@ var thinScrollbar = "[&::-webkit-scrollbar]:w-[4px] [&::-webkit-scrollbar-thumb]
 function cx(...inputs) {
   return twMerge(clsx(inputs));
 }
-function formatAddress(address, prefix = 4, suffix = 5) {
-  if (!address) return "";
-  if (!address.startsWith("0x") && address.length <= 32) return address;
-  if (address.length <= prefix + suffix) return address;
-  return `${address.slice(0, prefix)}...${address.slice(-suffix)}`;
-}
 function chainKindLabel(kind, labels) {
   return labels?.[kind] ?? CHAIN_KIND_LABELS[kind] ?? kind;
 }
@@ -346,73 +371,21 @@ function formatDisplayAmount(value, options = {}) {
   return `${prefix}${negative ? "-" : ""}${body}`;
 }
 
-// src/token-select/chain-wallet-status.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-function stop(event) {
-  event.preventDefault();
-  event.stopPropagation();
-}
-function ChainWalletStatus({ kind }) {
-  const { wallet, onCopyAddress } = usePayWidgets();
-  const account = wallet.accounts[kind];
-  const address = account?.address?.trim() || "";
-  const hideDisconnect = account?.canDisconnect === false;
-  if (!address) {
-    return /* @__PURE__ */ jsx2(
-      "button",
-      {
-        type: "button",
-        onClick: (event) => {
-          stop(event);
-          void wallet.connect(kind);
-        },
-        className: cx("shrink-0 cursor-pointer border-0 bg-transparent p-0 text-xs font-medium text-[#3F8AFB] hover:underline", fontSans),
-        children: account?.connecting ? "Connecting\u2026" : "Connect"
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-1", onClick: stop, children: [
-    /* @__PURE__ */ jsx2(
-      "button",
-      {
-        type: "button",
-        onClick: async (event) => {
-          stop(event);
-          if (!onCopyAddress) return;
-          onCopyAddress(address);
-        },
-        className: cx("truncate border-0 bg-transparent p-0 text-xs text-[#606060] hover:text-black", fontSans),
-        children: formatAddress(address)
-      }
-    ),
-    /* @__PURE__ */ jsx2(
-      "button",
-      {
-        type: "button",
-        "aria-label": "Copy address",
-        onClick: (event) => {
-          stop(event);
-          if (!onCopyAddress) return;
-          onCopyAddress(address);
-        },
-        className: "inline-flex shrink-0 cursor-pointer border-0 bg-transparent p-0 text-[#606060] hover:text-black",
-        children: /* @__PURE__ */ jsx2(IconCopy, { className: "size-3" })
-      }
-    ),
-    hideDisconnect ? null : /* @__PURE__ */ jsx2(
-      "button",
-      {
-        type: "button",
-        "aria-label": "Disconnect",
-        onClick: (event) => {
-          stop(event);
-          void wallet.disconnect(kind);
-        },
-        className: "inline-flex shrink-0 cursor-pointer border-0 bg-transparent p-0 text-[#ff5656]",
-        children: /* @__PURE__ */ jsx2(IconLogout, { className: "size-3" })
-      }
-    )
-  ] });
+// src/token-select/use-desktop.ts
+import { useEffect as useEffect2, useState } from "react";
+function useDesktop() {
+  const [matches, setMatches] = useState(() => {
+    if (typeof window === "undefined") return true;
+    return window.matchMedia(DESKTOP_MEDIA_QUERY).matches;
+  });
+  useEffect2(() => {
+    const media = window.matchMedia(DESKTOP_MEDIA_QUERY);
+    const onChange = () => setMatches(media.matches);
+    onChange();
+    media.addEventListener("change", onChange);
+    return () => media.removeEventListener("change", onChange);
+  }, []);
+  return matches;
 }
 
 // src/token-select/utils.ts
@@ -439,6 +412,10 @@ function tokenMatchesSearch(token, query) {
   if (token.providerSymbol.toLowerCase().includes(q)) return true;
   return Boolean(token.contractAddress?.toLowerCase().includes(q));
 }
+function matchesChainFilter(token, chainFilter) {
+  if (chainFilter === ALL_CHAIN_FILTER) return true;
+  return token.blockchain === chainFilter;
+}
 function formattedBalancePositive(formatted) {
   if (formatted == null || formatted === "") return false;
   const amount = Number(formatted);
@@ -458,29 +435,6 @@ function chainBalanceUsd(blockchain, tokens, getBalanceUsd) {
   }
   return total;
 }
-function parsePopularTokens(raw) {
-  if (!raw?.trim()) return [];
-  const refs = [];
-  for (const part of raw.split(",")) {
-    const trimmed = part.trim();
-    const colon = trimmed.indexOf(":");
-    if (colon <= 0 || colon >= trimmed.length - 1) continue;
-    const blockchain = trimmed.slice(0, colon).trim().toLowerCase();
-    const symbol = trimmed.slice(colon + 1).trim();
-    if (!blockchain || !symbol || symbol.includes(":")) continue;
-    refs.push({ blockchain, symbol: symbol.toUpperCase() });
-  }
-  return refs;
-}
-function popularTokensForWallets(tokens, configured, isChainConnected) {
-  const result = [];
-  for (const ref of configured) {
-    const token = tokens.find((item) => item.blockchain === ref.blockchain && item.symbol.toUpperCase() === ref.symbol);
-    if (!token || !isChainConnected(token.chain.chainKind)) continue;
-    result.push(token);
-  }
-  return result;
-}
 function sortChainsAlpha(chains) {
   return chains.slice().sort((left, right) => left.chainName.localeCompare(right.chainName));
 }
@@ -540,6 +494,9 @@ function sortTokensByBalance(tokens, getBalanceUsd, isLoading) {
     return compareTokensBySymbol(left, right);
   });
 }
+function sortTokensBySymbol(tokens) {
+  return tokens.slice().sort(compareTokensBySymbol);
+}
 function positiveBalanceTokens(tokens, getBalanceUsd) {
   return sortTokensByBalance(
     tokens.filter((token) => getBalanceUsd(token) > 0),
@@ -588,48 +545,54 @@ function sortTokensForChain(tokens, options) {
     return compareTokensByPriority(left, right, stableSymbols);
   });
 }
-var EVM_SEARCH_GROUP = "evm";
-var EVM_SEARCH_GROUP_NAME = "EVM-based";
-function groupSearchResults(tokens, query, options) {
-  const matched = tokens.filter((token) => tokenMatchesSearch(token, query));
-  const groups = /* @__PURE__ */ new Map();
-  for (const token of matched) {
-    const key = token.chain.chainKind === EVM_SEARCH_GROUP ? EVM_SEARCH_GROUP : token.blockchain;
-    const list = groups.get(key) ?? [];
-    list.push(token);
-    groups.set(key, list);
+function trendTokensIn(tokens, options) {
+  const trends = options.trends ?? TRENDS_TOKENS;
+  const inScope = tokens.filter((token) => matchesChainFilter(token, options.chainFilter));
+  const used = /* @__PURE__ */ new Set();
+  const head = [];
+  for (const ref of trends) {
+    if (options.chainFilter !== ALL_CHAIN_FILTER && ref.blockchain.toLowerCase() !== options.chainFilter.toLowerCase()) continue;
+    const match = inScope.find((token) => !used.has(token) && token.blockchain.toLowerCase() === ref.blockchain.toLowerCase() && token.symbol.toLowerCase() === ref.symbol.toLowerCase());
+    if (!match) continue;
+    used.add(match);
+    head.push(match);
   }
-  const stableSymbols = options.stableSymbols ?? DEFAULT_STABLE_SYMBOLS;
-  const built = Array.from(groups.entries()).map(([key, groupTokens]) => {
-    const chain = groupTokens[0].chain;
-    const folded = key === EVM_SEARCH_GROUP;
-    const sorted = options.role === "payer" ? sortTokensForChain(groupTokens, {
-      withBalances: options.hasOwner(chain.chainKind),
-      usdOf: options.usdOf,
-      loadingOf: options.loadingOf,
-      stableSymbols
-    }) : groupTokens.slice().sort((left, right) => compareTokensByPriority(left, right, stableSymbols));
-    return {
-      blockchain: folded ? EVM_SEARCH_GROUP : key,
-      chainName: folded ? EVM_SEARCH_GROUP_NAME : chain.chainName,
-      chainKind: chain.chainKind,
-      tokens: sorted,
-      usd: sorted.reduce((total, token) => {
-        const usd = options.usdOf(token);
-        return usd > 0 ? total + usd : total;
-      }, 0)
-    };
-  });
-  built.sort((left, right) => {
-    if (options.role === "payer" && right.usd !== left.usd) return right.usd - left.usd;
-    return left.chainName.localeCompare(right.chainName);
-  });
-  return built.map(({ blockchain, chainName, chainKind, tokens: groupTokens }) => ({
-    blockchain,
-    chainName,
-    chainKind,
-    tokens: groupTokens
-  }));
+  return [...head, ...options.sortRest(inScope.filter((token) => !used.has(token)))];
+}
+function allChainPreview(chains) {
+  if (chains.length <= 4) return chains.slice();
+  const byCode = new Map(chains.map((chain) => [chain.blockchain.toLowerCase(), chain]));
+  const used = /* @__PURE__ */ new Set();
+  const picked = [];
+  const take = (chain) => {
+    if (!chain || picked.length >= 4) return;
+    const code = chain.blockchain.toLowerCase();
+    if (used.has(code)) return;
+    used.add(code);
+    picked.push(chain);
+  };
+  const eth = byCode.get(ALL_CHAIN_PREVIEW_BLOCKCHAINS[0]);
+  if (eth) take(eth);
+  else take(chains.find((chain) => chain.chainKind === "evm"));
+  take(byCode.get("near"));
+  take(byCode.get("sol"));
+  take(byCode.get("tron"));
+  const fill = chains.filter((chain) => chain.chainKind === "evm" && !used.has(chain.blockchain.toLowerCase())).slice().sort((left, right) => left.chainName.localeCompare(right.chainName));
+  for (const chain of fill) take(chain);
+  return picked;
+}
+function chainMenuOrder(chains, tokens, options) {
+  const dotted = chains.filter((chain) => options.dotted.has(chain.blockchain));
+  const rest = chains.filter((chain) => !options.dotted.has(chain.blockchain));
+  return [
+    ...sortChainsForSidebar(dotted, [...tokens], options),
+    ...sortChainsAlpha(rest)
+  ];
+}
+function searchTokens(tokens, query, options) {
+  const matched = tokens.filter((token) => tokenMatchesSearch(token, query));
+  if (options.role === "payer") return sortTokensByBalance(matched, options.usdOf, options.loadingOf);
+  return sortTokensBySymbol(matched);
 }
 function recentTokensInOrder(tokens, recentAssetIds) {
   const byId = new Map(tokens.map((token) => [token.assetId, token]));
@@ -641,220 +604,260 @@ function recentTokensInOrder(tokens, recentAssetIds) {
   return result;
 }
 
-// src/token-select/chain-pane.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-function lockReason(lockChainKind, labels) {
-  return `Recipient address is on ${chainKindLabel(lockChainKind, labels)}; edit the recipient to change chain`;
-}
-function ChainPane(props) {
+// src/token-select/chain-select.tsx
+import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
+var SEARCH_FIELD_CLASS = "h-[42px] rounded-[12px] border-[#e3e3e3] bg-[#f6f6f6] text-sm placeholder:text-black/30";
+var SEARCH_ICON_CLASS = "left-4 size-[19px] text-black";
+function ChainSelect(props) {
   const {
     chains,
-    showWalletStatus = true,
-    onSelectChain,
+    previewChains,
+    dotted,
+    value,
+    onChange,
     lockChainKind = null,
     disabledBlockchains = null,
-    disabledReason,
-    scrollRef
+    disabledReason
   } = props;
   const { chainKindLabels } = usePayWidgets();
-  function wrapDisabled(disabled, reason, content) {
-    if (!disabled || !reason) return content;
-    return /* @__PURE__ */ jsx3(Tooltip, { side: "right", triggerClassName: "min-w-0 flex-1", content: reason, children: content });
+  const isDesktop = useDesktop();
+  const [open, setOpen] = useState2(false);
+  const [query, setQuery] = useState2("");
+  const rootRef = useRef(null);
+  const selected = value === ALL_CHAIN_FILTER ? void 0 : chains.find((chain) => chain.blockchain === value);
+  useEffect3(() => {
+    if (!open) return;
+    setQuery("");
+  }, [open]);
+  useEffect3(() => {
+    if (!open || !isDesktop) return;
+    const onPointerDown = (event) => {
+      const target = event.target;
+      if (!(target instanceof Node) || rootRef.current?.contains(target)) return;
+      setOpen(false);
+    };
+    const onKeyDown = (event) => {
+      if (event.key !== "Escape") return;
+      event.stopPropagation();
+      event.preventDefault();
+      setOpen(false);
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown, true);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown, true);
+    };
+  }, [open, isDesktop]);
+  function reasonFor(chain) {
+    if (isBlockchainDisabled(chain.blockchain, disabledBlockchains)) return disabledReason;
+    if (isChainKindLocked(chain.chainKind, lockChainKind) && lockChainKind) {
+      return `Recipient address is on ${chainKindLabel(lockChainKind, chainKindLabels)}; edit the recipient to change chain`;
+    }
+    return void 0;
   }
-  return /* @__PURE__ */ jsx3("div", { className: "flex h-full min-h-0 flex-col", children: /* @__PURE__ */ jsx3("div", { ref: scrollRef, className: cx("min-h-0 flex-1 overflow-y-auto", thinScrollbar), children: /* @__PURE__ */ jsxs2("div", { className: "px-2.5 pt-[17px] pb-3", children: [
-    /* @__PURE__ */ jsx3("p", { className: cx("px-3.5 text-sm font-medium text-[#aaa]", fontSans), children: "All Networks" }),
-    /* @__PURE__ */ jsx3("div", { className: "mt-1", children: chains.map((chain) => {
-      const locked = isChainKindLocked(chain.chainKind, lockChainKind);
-      const chainDisabled = isBlockchainDisabled(chain.blockchain, disabledBlockchains);
-      const disabled = locked || chainDisabled;
-      const reason = chainDisabled ? disabledReason : locked && lockChainKind ? lockReason(lockChainKind, chainKindLabels) : void 0;
-      return /* @__PURE__ */ jsxs2(
-        "div",
-        {
-          className: cx(
-            "flex h-[66px] w-full items-center gap-4 rounded-[12px] px-3.5",
-            disabled ? "opacity-40" : "hover:bg-[#f6f6f6]"
-          ),
-          children: [
-            wrapDisabled(
-              disabled,
-              reason,
-              /* @__PURE__ */ jsxs2(
-                "button",
-                {
-                  type: "button",
-                  disabled,
-                  onClick: () => {
-                    if (disabled) return;
-                    onSelectChain(chain.blockchain);
-                  },
-                  className: cx(
-                    "flex min-w-0 flex-1 items-center gap-3 border-0 bg-transparent text-left",
-                    disabled ? "cursor-not-allowed" : "cursor-pointer"
-                  ),
-                  children: [
-                    /* @__PURE__ */ jsx3("img", { src: chain.logo, alt: "", className: "size-8 shrink-0 object-cover" }),
-                    /* @__PURE__ */ jsx3("span", { className: cx("truncate text-sm font-medium text-black", fontSans), children: chain.chainName })
-                  ]
-                }
-              )
-            ),
-            showWalletStatus ? /* @__PURE__ */ jsx3(ChainWalletStatus, { kind: chain.chainKind }) : /* @__PURE__ */ jsx3("span", { className: "min-w-0 flex-1" }),
-            /* @__PURE__ */ jsx3(
-              "button",
-              {
-                type: "button",
-                "aria-label": `Open ${chain.chainName}`,
-                disabled,
-                onClick: () => {
-                  if (disabled) return;
-                  onSelectChain(chain.blockchain);
-                },
-                className: cx(
-                  "inline-flex shrink-0 border-0 bg-transparent p-0 text-[#606060]",
-                  disabled ? "cursor-not-allowed" : "cursor-pointer"
-                ),
-                children: /* @__PURE__ */ jsx3(IconChevron, {})
-              }
-            )
-          ]
-        },
-        chain.blockchain
-      );
-    }) })
-  ] }) }) });
-}
-
-// src/token-select/network-rail.tsx
-import { IconAllNetworks } from "@stableflow/pay-ui/icons/all-networks";
-import { IconWallet } from "@stableflow/pay-ui/icons/wallet";
-import { Tooltip as Tooltip2 } from "@stableflow/pay-ui/tooltip";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-function chipClass(selected, disabled) {
-  return cx(
-    "relative flex size-[50px] shrink-0 items-center justify-center rounded-[12px] border border-solid",
-    selected ? "border-[#06f] bg-[rgba(0,102,255,0.1)]" : "border-transparent bg-transparent",
-    disabled ? "cursor-not-allowed opacity-40" : "cursor-pointer hover:bg-black/5"
+  const trimmed = query.trim().toLowerCase();
+  const showAll = !trimmed || "all".includes(trimmed);
+  const visible = chains.filter((chain) => {
+    if (!trimmed) return true;
+    return chain.chainName.toLowerCase().includes(trimmed) || chain.blockchain.toLowerCase().includes(trimmed);
+  });
+  const empty = !showAll && visible.length === 0;
+  function select(blockchain) {
+    onChange(blockchain);
+    setOpen(false);
+  }
+  const menu = /* @__PURE__ */ jsx3(
+    ChainMenu,
+    {
+      showAll,
+      chains: visible,
+      previewChains,
+      dotted,
+      value,
+      query,
+      onQueryChange: setQuery,
+      empty,
+      isDesktop,
+      reasonFor,
+      onSelect: select
+    }
   );
+  return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: "relative shrink-0", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        onClick: () => setOpen((current) => !current),
+        className: "flex h-[50px] w-[70px] cursor-pointer items-center justify-between pl-[9px] pr-[12px] gap-1.5 rounded-[12px] border border-[#e0e0e0] bg-[#fdfdfd] shadow-[0_0_40px_0_rgba(0,0,0,0.06)]",
+        children: [
+          selected ? /* @__PURE__ */ jsx3("img", { src: selected.logo, alt: "", className: "size-7 rounded-[8px] object-cover" }) : /* @__PURE__ */ jsx3(ChainStack, { chains: previewChains, logoClassName: "size-[12px] rounded-[2px] object-cover" }),
+          /* @__PURE__ */ jsx3(IconChevron, { className: cx("size-2.5 text-black duration-150", open ? "-rotate-90" : "rotate-90") })
+        ]
+      }
+    ),
+    open && isDesktop ? /* @__PURE__ */ jsx3(
+      "div",
+      {
+        role: "listbox",
+        "aria-label": "Select network",
+        onKeyDown: (event) => {
+          if (event.key !== "Escape") return;
+          event.stopPropagation();
+          event.preventDefault();
+          setOpen(false);
+        },
+        className: "absolute top-[59px] right-0 z-20 flex max-h-[483px] w-[302px] flex-col rounded-[12px] border border-[#e0e0e0] bg-[#fdfdfd] p-4 shadow-[0_0_40px_0_rgba(0,0,0,0.06)]",
+        children: menu
+      }
+    ) : null,
+    !isDesktop ? /* @__PURE__ */ jsx3(
+      Drawer,
+      {
+        open,
+        onClose: () => setOpen(false),
+        title: "Select Network",
+        titleClassName: cx("text-lg font-semibold text-black", fontSans),
+        cardClassName: "max-h-[80vh]",
+        contentClassName: "overflow-hidden",
+        children: /* @__PURE__ */ jsx3("div", { className: "flex h-[min(483px,60vh)] min-h-0 flex-col", children: menu })
+      }
+    ) : null
+  ] });
 }
-function NetworkRail(props) {
+function ChainMenu(props) {
   const {
-    role,
-    walletConnected,
-    selection,
+    showAll,
     chains,
-    fundedBlockchains,
-    lockChainKind = null,
-    disabledBlockchains = null,
-    disabledReason,
-    onSelectWallet,
-    onSelectAll,
-    onSelectNetworks,
-    onSelectChain,
-    className
+    previewChains,
+    dotted,
+    value,
+    query,
+    onQueryChange,
+    empty,
+    isDesktop,
+    reasonFor,
+    onSelect
   } = props;
-  const { chainKindLabels } = usePayWidgets();
-  const payer = role === "payer";
-  const networksSelected = selection.kind === "networks";
-  const allSelected = selection.kind === "all";
-  const walletSelected = selection.kind === "wallet";
-  function wrapDisabled(disabled, reason, content) {
-    if (!disabled || !reason) return content;
-    return /* @__PURE__ */ jsx4(Tooltip2, { side: "right", content: reason, children: content });
-  }
-  function chainButton(chain) {
-    const locked = isChainKindLocked(chain.chainKind, lockChainKind);
-    const chainDisabled = isBlockchainDisabled(chain.blockchain, disabledBlockchains);
-    const disabled = locked || chainDisabled;
-    const reason = chainDisabled ? disabledReason : locked ? `Recipient address is on ${chainKindLabel(lockChainKind, chainKindLabels)}; edit the recipient to change chain` : void 0;
-    const selected = selection.kind === "chain" && selection.blockchain === chain.blockchain;
-    return /* @__PURE__ */ jsx4("span", { children: wrapDisabled(
-      disabled,
-      reason,
-      /* @__PURE__ */ jsxs3(
-        "button",
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx3(
+      SearchInput,
+      {
+        value: query,
+        onChange: onQueryChange,
+        placeholder: "search network",
+        iconClassName: SEARCH_ICON_CLASS,
+        inputClassName: cx(SEARCH_FIELD_CLASS, "pl-[43px]")
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: cx("mt-2.5 min-h-0 flex-1 overflow-y-auto", thinScrollbar), children: [
+      showAll ? /* @__PURE__ */ jsx3(
+        ChainOption,
         {
-          type: "button",
-          "aria-label": chain.chainName,
-          disabled,
-          onClick: () => {
-            if (disabled) return;
-            onSelectChain(chain.blockchain);
-          },
-          className: chipClass(selected, disabled),
-          children: [
-            /* @__PURE__ */ jsx4("img", { src: chain.logo, alt: "", className: "size-8 object-cover" }),
-            fundedBlockchains.has(chain.blockchain) ? /* @__PURE__ */ jsx4("span", { className: "absolute top-1 right-1 size-2.5 rounded-full border border-white bg-[#06f]" }) : null
-          ]
+          selected: value === ALL_CHAIN_FILTER,
+          onSelect: () => onSelect(ALL_CHAIN_FILTER),
+          label: "All",
+          children: /* @__PURE__ */ jsx3(ChainStack, { chains: previewChains, logoClassName: "size-[15px] rounded-[4px] object-cover" })
         }
-      )
-    ) }, chain.blockchain);
-  }
-  return /* @__PURE__ */ jsxs3("div", { className: cx("box-border flex h-full w-[76px] shrink-0 flex-col items-center border-r border-[#e3e3e3] pt-3", className), children: [
-    payer && walletConnected ? /* @__PURE__ */ jsx4("button", { type: "button", "aria-label": "Wallet", onClick: onSelectWallet, className: chipClass(walletSelected, false), children: /* @__PURE__ */ jsx4(IconWallet, { className: walletSelected ? "size-5 text-[#06f]" : "size-5 text-black" }) }) : null,
-    payer && !walletConnected ? /* @__PURE__ */ jsx4("button", { type: "button", "aria-label": "All networks", onClick: onSelectNetworks, className: chipClass(networksSelected, false), children: /* @__PURE__ */ jsx4(IconAllNetworks, { className: "size-5 text-black" }) }) : null,
-    !payer ? /* @__PURE__ */ jsx4("button", { type: "button", "aria-label": "All", onClick: onSelectAll, className: chipClass(allSelected, false), children: /* @__PURE__ */ jsx4("span", { className: cx("text-sm font-medium text-black", fontSans), children: "All" }) }) : null,
-    payer && walletConnected ? /* @__PURE__ */ jsxs3("div", { className: cx("mt-3.5 flex min-h-0 w-full flex-1 flex-col items-center gap-3.5 overflow-y-auto", thinScrollbar), children: [
-      chains.map((chain) => chainButton(chain)),
-      /* @__PURE__ */ jsx4("div", { className: "h-px w-8 shrink-0 bg-[#e3e3e3]" }),
-      /* @__PURE__ */ jsx4("button", { type: "button", "aria-label": "All networks", onClick: onSelectNetworks, className: chipClass(networksSelected, false), children: /* @__PURE__ */ jsx4(IconAllNetworks, { className: "size-5 text-black" }) }),
-      /* @__PURE__ */ jsx4("div", { className: "pb-3" })
-    ] }) : null,
-    !payer ? /* @__PURE__ */ jsxs3("div", { className: cx("mt-3.5 flex min-h-0 w-full flex-1 flex-col items-center gap-3.5 overflow-y-auto", thinScrollbar), children: [
-      chains.map((chain) => chainButton(chain)),
-      /* @__PURE__ */ jsx4("div", { className: "pb-3" })
-    ] }) : null
+      ) : null,
+      chains.map((chain) => {
+        const reason = reasonFor(chain);
+        const disabled = Boolean(reason);
+        return /* @__PURE__ */ jsx3(
+          ChainOption,
+          {
+            selected: value === chain.blockchain,
+            disabled,
+            reason,
+            showReason: !isDesktop,
+            dotted: dotted.has(chain.blockchain),
+            onSelect: () => onSelect(chain.blockchain),
+            label: chain.chainName,
+            children: /* @__PURE__ */ jsx3("img", { src: chain.logo, alt: "", className: "size-8 rounded-[8px] object-cover" })
+          },
+          chain.blockchain
+        );
+      }),
+      empty ? /* @__PURE__ */ jsx3("p", { className: cx("px-[13px] py-4 text-[13px] text-[#606060]", fontSans), children: "No networks found" }) : null
+    ] })
   ] });
 }
-
-// src/token-select/pane-transition.tsx
-import { AnimatePresence, motion, useReducedMotion } from "motion/react";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var EASE = [0.32, 0.72, 0, 1];
-var variants = {
-  enter: (direction) => ({ x: direction > 0 ? 24 : -24, opacity: 0 }),
-  center: { x: 0, opacity: 1 },
-  exit: (direction) => ({ x: direction > 0 ? -24 : 24, opacity: 0 })
-};
-function PaneTransition(props) {
-  const reduce = useReducedMotion();
-  if (reduce) {
-    return /* @__PURE__ */ jsx5("div", { className: "relative min-h-0 flex-1 overflow-hidden", children: props.children });
-  }
-  return /* @__PURE__ */ jsx5("div", { className: "relative min-h-0 flex-1 overflow-hidden", children: /* @__PURE__ */ jsx5(AnimatePresence, { initial: false, custom: props.direction, children: /* @__PURE__ */ jsx5(
-    motion.div,
+function ChainOption(props) {
+  const { selected, disabled = false, reason, showReason = false, dotted = false, onSelect, label, children } = props;
+  const button = /* @__PURE__ */ jsxs(
+    "button",
     {
-      custom: props.direction,
-      variants,
-      initial: "enter",
-      animate: "center",
-      exit: "exit",
-      transition: { duration: 0.22, ease: EASE },
-      className: "absolute inset-0 flex min-h-0 flex-col",
-      children: props.children
-    },
-    props.paneKey
-  ) }) });
+      type: "button",
+      "aria-disabled": disabled || void 0,
+      onClick: () => {
+        if (disabled) return;
+        onSelect();
+      },
+      className: cx(
+        "flex w-full cursor-pointer items-center gap-3 rounded-[6px] border-0 bg-transparent px-1.5 py-1.5 text-left",
+        selected && "bg-[#f6f6f6]",
+        disabled && "cursor-not-allowed"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxs("span", { className: cx("flex min-w-0 items-center gap-3", disabled && "opacity-40"), children: [
+            /* @__PURE__ */ jsx3("span", { className: "flex size-8 shrink-0 items-center justify-center", children }),
+            /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
+              /* @__PURE__ */ jsx3("span", { className: cx("truncate text-sm font-medium text-black", fontSans), children: label }),
+              dotted ? /* @__PURE__ */ jsx3("span", { className: "size-2 shrink-0 rounded-full bg-[#6284f5]" }) : null
+            ] })
+          ] }),
+          disabled && showReason && reason ? /* @__PURE__ */ jsx3("span", { className: cx("mt-0.5 block pl-11 text-xs font-normal text-[#606060]", fontSans), children: reason }) : null
+        ] }),
+        selected ? /* @__PURE__ */ jsx3(IconCheck, { className: "mr-1 size-2.5 shrink-0 text-black" }) : null
+      ]
+    }
+  );
+  if (disabled && reason && !showReason) {
+    return /* @__PURE__ */ jsx3(Tooltip, { content: reason, triggerClassName: "flex w-full", children: button });
+  }
+  return button;
 }
 
 // src/token-select/prefs.ts
 import { useSyncExternalStore as useSyncExternalStore2 } from "react";
-var EMPTY_PREFS = { recentAssetIds: [], recentBlockchains: [] };
-function rememberRecentAsset(recent, assetId) {
+var EMPTY_PREFS = {
+  recentAssetIds: [],
+  recentSearchAssetIds: [],
+  recentBlockchains: []
+};
+function rememberId(recent, assetId, max) {
   const id = assetId.trim();
   if (!id) return recent;
-  return [id, ...recent.filter((item) => item !== id)].slice(0, MAX_RECENT_ASSETS);
+  return [id, ...recent.filter((item) => item !== id)].slice(0, max);
+}
+function rememberRecentAsset(recent, assetId) {
+  return rememberId(recent, assetId, MAX_RECENT_HISTORY);
+}
+function rememberRecentSearch(recent, assetId) {
+  return rememberId(recent, assetId, MAX_RECENT_HISTORY);
+}
+function withoutAssetIds(recent, assetIds) {
+  const drop = new Set(assetIds);
+  return recent.filter((id) => !drop.has(id));
 }
 function rememberRecentBlockchain(recent, blockchain) {
   const code = blockchain.trim();
   if (!code) return recent;
   return [code, ...recent.filter((item) => item !== code)].slice(0, MAX_RECENT_BLOCKCHAINS);
 }
+function cleanIds(value, max) {
+  if (!Array.isArray(value)) return [];
+  return value.filter((id) => typeof id === "string" && id.trim()).slice(0, max);
+}
 function migrateTokenSelectPrefs(persisted, version) {
   const state = persisted ?? {};
-  const recentBlockchains = version >= 1 ? Array.isArray(state.recentBlockchains) ? state.recentBlockchains : [] : typeof state.lastBlockchain === "string" && state.lastBlockchain ? [state.lastBlockchain] : [];
-  const recentAssetIds = version >= TOKEN_SELECT_PREFS_VERSION && Array.isArray(state.recentAssetIds) ? state.recentAssetIds.filter((id) => typeof id === "string" && id.trim()).slice(0, MAX_RECENT_ASSETS) : typeof state.lastAssetId === "string" && state.lastAssetId ? [state.lastAssetId] : [];
-  return { recentAssetIds, recentBlockchains };
+  const recentBlockchains = version >= 1 ? cleanIds(state.recentBlockchains, MAX_RECENT_BLOCKCHAINS) : typeof state.lastBlockchain === "string" && state.lastBlockchain ? [state.lastBlockchain] : [];
+  const recentAssetIds = version >= 2 && Array.isArray(state.recentAssetIds) ? cleanIds(state.recentAssetIds, MAX_RECENT_HISTORY) : typeof state.lastAssetId === "string" && state.lastAssetId ? [state.lastAssetId] : [];
+  const recentSearchAssetIds = version >= TOKEN_SELECT_PREFS_VERSION ? cleanIds(state.recentSearchAssetIds, MAX_RECENT_HISTORY) : [];
+  return { recentAssetIds, recentSearchAssetIds, recentBlockchains };
 }
 function readStorage() {
   if (typeof localStorage === "undefined") return EMPTY_PREFS;
@@ -892,10 +895,23 @@ function getTokenSelectPrefs() {
 }
 function setLastToken(assetId, blockchain) {
   emit2({
+    ...prefs,
     recentAssetIds: rememberRecentAsset(prefs.recentAssetIds, assetId),
     recentBlockchains: rememberRecentBlockchain(prefs.recentBlockchains, blockchain)
   });
 }
+function setRecentSearch(assetId) {
+  emit2({
+    ...prefs,
+    recentSearchAssetIds: rememberRecentSearch(prefs.recentSearchAssetIds, assetId)
+  });
+}
+function removeRecentSearches(assetIds) {
+  emit2({
+    ...prefs,
+    recentSearchAssetIds: withoutAssetIds(prefs.recentSearchAssetIds, assetIds)
+  });
+}
 function setLastBlockchain(blockchain) {
   emit2({
     ...prefs,
@@ -906,26 +922,25 @@ function useTokenSelectPrefs() {
   return useSyncExternalStore2(subscribe2, getTokenSelectPrefs, getTokenSelectPrefs);
 }
 
-// src/token-select/token-pane.tsx
-import { IconChevron as IconChevron2 } from "@stableflow/pay-ui/icons/chevron";
+// src/token-select/recent-tiles.tsx
 import { Skeleton } from "@stableflow/pay-ui/skeleton";
 
 // src/token-select/lazy-image.tsx
-import { useEffect as useEffect2, useRef, useState } from "react";
+import { useEffect as useEffect4, useRef as useRef2, useState as useState3 } from "react";
 import { useInView } from "motion/react";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 function LazyImage(props) {
   const { src, fallbackSrc, alt = "", className } = props;
-  const ref = useRef(null);
+  const ref = useRef2(null);
   const inView = useInView(ref, { once: true });
-  const [failedSrc, setFailedSrc] = useState(null);
-  useEffect2(() => {
+  const [failedSrc, setFailedSrc] = useState3(null);
+  useEffect4(() => {
     setFailedSrc(null);
   }, [src]);
   const requested = src.trim();
   const useFallback = requested.length === 0 || failedSrc === requested;
   const shown = useFallback ? fallbackSrc : requested;
-  return /* @__PURE__ */ jsx6("span", { ref, className: "block size-full", children: inView ? /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx4("span", { ref, className: "block size-full", children: inView ? /* @__PURE__ */ jsx4(
     "img",
     {
       src: shown,
@@ -981,37 +996,94 @@ function tokenLogoUrl(symbol) {
   return logoPath(`/stableflow/tokens/${file}.png`);
 }
 
+// src/token-select/recent-tiles.tsx
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+function RecentTiles(props) {
+  const { tokens, onSelect, isTokenDisabled } = props;
+  if (tokens.length === 0) return null;
+  return /* @__PURE__ */ jsx5("div", { className: "grid grid-cols-5 gap-2 px-5 md:gap-3", children: tokens.map((token) => {
+    const disabled = Boolean(isTokenDisabled?.(token));
+    return /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        type: "button",
+        disabled,
+        onClick: () => onSelect(token),
+        className: cx(
+          "flex h-[72px] cursor-pointer flex-col items-center justify-center gap-1 rounded-[12px] border-0 bg-[#f6f6f6] px-1 hover:bg-[#ededed]",
+          disabled && "cursor-not-allowed opacity-40 hover:bg-[#f6f6f6]"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs2("span", { className: "relative size-[26px] shrink-0", children: [
+            /* @__PURE__ */ jsx5(
+              LazyImage,
+              {
+                src: token.logo,
+                fallbackSrc: DEFAULT_TOKEN_LOGO,
+                className: "size-[26px] rounded-[12px] object-cover"
+              }
+            ),
+            /* @__PURE__ */ jsx5(
+              "img",
+              {
+                src: token.chain.logo,
+                alt: "",
+                className: "absolute -right-1 -bottom-1 size-3 rounded-[4px] border border-white object-cover"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx5("span", { className: cx("max-w-full truncate text-sm font-semibold text-black", fontSans), children: token.symbol })
+        ]
+      },
+      token.assetId
+    );
+  }) });
+}
+function RecentTileSkeletons() {
+  return /* @__PURE__ */ jsx5("div", { className: "grid grid-cols-5 gap-2 px-5 md:gap-3", "aria-hidden": true, children: Array.from({ length: 5 }, (_, index) => /* @__PURE__ */ jsx5(Skeleton, { className: "h-[72px] rounded-[12px]" }, index)) });
+}
+
 // src/token-select/token-pane.tsx
-import { Fragment, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { IconDatabase } from "@stableflow/pay-ui/icons/solid/database";
+import { IconDuration } from "@stableflow/pay-ui/icons/solid/duration";
+import { IconTrends } from "@stableflow/pay-ui/icons/outline/trends";
+import { Skeleton as Skeleton2 } from "@stableflow/pay-ui/skeleton";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 function TokenPane(props) {
   const {
     sections,
     selectedAssetId,
-    loading,
     showBalances = false,
-    showWalletStatus = true,
-    header = null,
     getBalance,
     isBalanceLoading,
     onSelectToken,
     isTokenDisabled,
-    rowClassName
+    rowClassName,
+    emptyLabel = null
   } = props;
-  const visibleSections = sections.filter((section) => section.title || section.tokens.length > 0);
-  const hasTokens = sections.some((section) => section.tokens.length > 0);
-  return /* @__PURE__ */ jsx7("div", { className: "flex h-full min-h-0 flex-1 flex-col", children: /* @__PURE__ */ jsx7("div", { className: cx("min-h-0 flex-1 overflow-y-auto", thinScrollbar), children: /* @__PURE__ */ jsxs4("div", { className: "px-2.5 pt-[17px] pb-3", children: [
-    header ? /* @__PURE__ */ jsx7(ChainListHeader, { header, showWalletStatus }) : null,
-    visibleSections.map((section) => /* @__PURE__ */ jsxs4("section", { className: "mb-2", children: [
-      section.title ? /* @__PURE__ */ jsxs4("div", { className: "mb-1 flex items-center justify-between gap-2 px-3.5", children: [
-        /* @__PURE__ */ jsx7("p", { className: cx("min-w-0 truncate text-sm font-medium text-[#aaa]", fontSans), children: section.title }),
-        showWalletStatus && section.walletKind ? /* @__PURE__ */ jsx7(ChainWalletStatus, { kind: section.walletKind }) : null
+  return /* @__PURE__ */ jsx6("div", { className: cx("min-h-0 flex-1 overflow-y-auto", thinScrollbar), children: /* @__PURE__ */ jsxs3("div", { className: "px-3 pt-3 pb-3", children: [
+    sections.map((section) => /* @__PURE__ */ jsxs3("section", { className: "mb-2", children: [
+      section.title ? /* @__PURE__ */ jsxs3("div", { className: "mb-1 flex items-center justify-between gap-2 px-[13px]", children: [
+        /* @__PURE__ */ jsxs3("span", { className: "flex min-w-0 items-center gap-2 text-[#aaa]", children: [
+          /* @__PURE__ */ jsx6(SectionIcon, { icon: section.icon }),
+          /* @__PURE__ */ jsx6("span", { className: cx("truncate text-sm font-medium text-[#aaa]", fontSans), children: section.title })
+        ] }),
+        section.action ? /* @__PURE__ */ jsx6(
+          "button",
+          {
+            type: "button",
+            onClick: section.action.onClick,
+            className: cx("cursor-pointer border-0 bg-transparent p-0 text-sm font-medium text-[#aaa]", fontSans),
+            children: section.action.label
+          }
+        ) : null
       ] }) : null,
-      section.tokens.map((token) => /* @__PURE__ */ jsx7(
+      section.skeletonRows ? /* @__PURE__ */ jsx6(TokenListSkeleton, { rows: section.skeletonRows }) : null,
+      section.tokens.map((token) => /* @__PURE__ */ jsx6(
         TokenRow,
         {
           token,
           selected: token.assetId === selectedAssetId,
-          recent: token.assetId === section.badgeAssetId,
           showBalances,
           formatted: showBalances ? getBalance(token) : null,
           loadingBalance: showBalances && isBalanceLoading(token),
@@ -1022,57 +1094,43 @@ function TokenPane(props) {
         `${section.id}-${token.assetId}`
       ))
     ] }, section.id)),
-    loading && !hasTokens ? /* @__PURE__ */ jsx7(TokenListSkeleton, {}) : null,
-    !loading && !hasTokens ? /* @__PURE__ */ jsx7("p", { className: cx("px-3.5 py-4 text-[13px] text-[#606060]", fontSans), children: "No tokens found" }) : null
-  ] }) }) });
-}
-function ChainListHeader(props) {
-  const { header, showWalletStatus } = props;
-  const walletKind = header.walletKind;
-  return /* @__PURE__ */ jsxs4("div", { className: "mb-1 flex items-center justify-between gap-3 px-3.5", children: [
-    header.kind === "back" ? /* @__PURE__ */ jsxs4(
-      "button",
-      {
-        type: "button",
-        onClick: header.onBack,
-        className: cx("flex min-w-0 cursor-pointer items-center gap-3 border-0 bg-transparent p-0 text-sm font-medium text-[#aaa]", fontSans),
-        children: [
-          /* @__PURE__ */ jsx7(IconChevron2, { className: "rotate-180 text-[#aaa]" }),
-          /* @__PURE__ */ jsx7("span", { className: "truncate", children: header.title })
-        ]
-      }
-    ) : /* @__PURE__ */ jsx7("p", { className: cx("min-w-0 truncate text-sm font-medium text-[#aaa]", fontSans), children: header.title }),
-    showWalletStatus && walletKind ? /* @__PURE__ */ jsx7(ChainWalletStatus, { kind: walletKind }) : null
-  ] });
-}
-function TokenListSkeleton() {
-  return /* @__PURE__ */ jsx7("div", { "aria-hidden": true, children: Array.from({ length: 6 }, (_, index) => /* @__PURE__ */ jsxs4("div", { className: "flex h-[66px] items-center gap-2.5 px-3.5", children: [
-    /* @__PURE__ */ jsx7(Skeleton, { className: "size-8 shrink-0 rounded-full" }),
-    /* @__PURE__ */ jsxs4("span", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [
-      /* @__PURE__ */ jsx7(Skeleton, { className: "h-3.5 w-24" }),
-      /* @__PURE__ */ jsx7(Skeleton, { className: "h-3 w-16" })
+    emptyLabel ? /* @__PURE__ */ jsx6("p", { className: cx("px-[13px] py-4 text-[13px] text-[#606060]", fontSans), children: emptyLabel }) : null
+  ] }) });
+}
+function SectionIcon(props) {
+  const className = "size-3.5 text-[#aaa]";
+  if (props.icon === "database") return /* @__PURE__ */ jsx6(IconDatabase, { className });
+  if (props.icon === "duration") return /* @__PURE__ */ jsx6(IconDuration, { className });
+  return /* @__PURE__ */ jsx6(IconTrends, { className });
+}
+function TokenListSkeleton(props) {
+  return /* @__PURE__ */ jsx6("div", { "aria-hidden": true, children: Array.from({ length: props.rows }, (_, index) => /* @__PURE__ */ jsxs3("div", { className: "flex h-[66px] items-center gap-2.5 px-[13px]", children: [
+    /* @__PURE__ */ jsx6(Skeleton2, { className: "size-8 shrink-0 rounded-full" }),
+    /* @__PURE__ */ jsxs3("span", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsx6(Skeleton2, { className: "h-3.5 w-24" }),
+      /* @__PURE__ */ jsx6(Skeleton2, { className: "h-3 w-16" })
     ] })
   ] }, index)) });
 }
 function TokenRow(props) {
-  const { token, selected, recent, showBalances, formatted, loadingBalance, disabled, onSelect, className } = props;
+  const { token, selected, showBalances, formatted, loadingBalance, disabled, onSelect, className } = props;
   const usd = showBalances && !loadingBalance && formatted != null ? tokenBalanceUsd(token, formatted) : -1;
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs3(
     "button",
     {
       type: "button",
       disabled,
       onClick: onSelect,
       className: cx(
-        "flex h-[66px] w-full cursor-pointer items-center justify-between gap-2 rounded-[12px] border-0 bg-transparent px-3.5 text-left hover:bg-[#f6f6f6]",
+        "flex h-[66px] w-full cursor-pointer items-center justify-between gap-2 rounded-[12px] border-0 bg-transparent px-[13px] text-left hover:bg-[#f6f6f6]",
         selected && "bg-[#f6f6f6]",
         disabled && "cursor-not-allowed opacity-40 hover:bg-transparent",
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs4("span", { className: "flex min-w-0 items-center gap-2.5", children: [
-          /* @__PURE__ */ jsxs4("span", { className: "relative size-8 shrink-0", children: [
-            /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsxs3("span", { className: "flex min-w-0 items-center gap-2.5", children: [
+          /* @__PURE__ */ jsxs3("span", { className: "relative size-8 shrink-0", children: [
+            /* @__PURE__ */ jsx6(
               LazyImage,
               {
                 src: token.logo,
@@ -1080,7 +1138,7 @@ function TokenRow(props) {
                 className: "size-8 rounded-[12px] object-cover"
               }
             ),
-            /* @__PURE__ */ jsx7(
+            /* @__PURE__ */ jsx6(
               "img",
               {
                 src: token.chain.logo,
@@ -1089,69 +1147,58 @@ function TokenRow(props) {
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs4("span", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsxs4("span", { className: "flex min-w-0 items-center gap-1.5", children: [
-              /* @__PURE__ */ jsx7("span", { className: cx("truncate text-sm font-semibold text-black", fontSans), children: token.symbol }),
-              recent ? /* @__PURE__ */ jsx7("span", { className: cx("shrink-0 rounded-[9px] bg-[#06f]/10 px-1.5 text-[10px] font-medium leading-[18px] text-[#06f]", fontSans), children: "Recently Used" }) : null
-            ] }),
-            /* @__PURE__ */ jsx7("span", { className: cx("mt-0.5 block truncate text-xs text-[#606060]", fontSans), children: token.chain.chainName })
+          /* @__PURE__ */ jsxs3("span", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx6("span", { className: cx("block truncate text-sm font-semibold text-black", fontSans), children: token.symbol }),
+            /* @__PURE__ */ jsx6("span", { className: cx("mt-0.5 block truncate text-xs text-[#606060]", fontSans), children: token.chain.chainName })
           ] })
         ] }),
-        showBalances ? /* @__PURE__ */ jsx7("span", { className: "shrink-0 text-right", children: loadingBalance ? /* @__PURE__ */ jsx7(
+        showBalances ? /* @__PURE__ */ jsx6("span", { className: "shrink-0 text-right", children: loadingBalance ? /* @__PURE__ */ jsx6(
           "span",
           {
             className: "inline-block size-3.5 animate-spin rounded-full border-2 border-[#606060] border-r-transparent",
             "aria-label": "Loading balance"
           }
-        ) : formatted != null ? /* @__PURE__ */ jsxs4(Fragment, { children: [
-          /* @__PURE__ */ jsx7("span", { className: cx("block text-sm font-medium text-black", fontSans), children: formatDisplayAmount(formatted, { prefix: "", maxDecimals: 4 }) }),
-          usd >= 0 ? /* @__PURE__ */ jsx7("span", { className: cx("block text-xs text-[#606060]", fontSans), children: formatDisplayAmount(usd, { prefix: "$", showDust: true }) }) : null
-        ] }) : /* @__PURE__ */ jsx7("span", { className: cx("text-sm font-medium text-black", fontSans), children: "-" }) }) : null
+        ) : formatted != null ? /* @__PURE__ */ jsxs3(Fragment2, { children: [
+          /* @__PURE__ */ jsx6("span", { className: cx("block text-sm font-medium text-black", fontSans), children: formatDisplayAmount(formatted, { prefix: "", maxDecimals: 4 }) }),
+          usd >= 0 ? /* @__PURE__ */ jsx6("span", { className: cx("block text-xs text-[#606060]", fontSans), children: formatDisplayAmount(usd, { prefix: "$", showDust: true }) }) : null
+        ] }) : /* @__PURE__ */ jsx6("span", { className: cx("text-sm font-medium text-black", fontSans), children: "-" }) }) : null
       ]
     }
   );
 }
 
 // src/token-select/search-results.tsx
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 function SearchResults(props) {
   const {
-    groups,
+    tokens,
     selectedAssetId,
     loading,
     showBalances = false,
-    showWalletStatus = true,
     getBalance,
     isBalanceLoading,
     onSelectToken,
     isTokenDisabled,
     rowClassName
   } = props;
-  const hasTokens = groups.some((group) => group.tokens.length > 0);
-  return /* @__PURE__ */ jsx8("div", { className: "flex h-full min-h-0 flex-1 flex-col", children: /* @__PURE__ */ jsx8("div", { className: cx("min-h-0 flex-1 overflow-y-auto", thinScrollbar), children: /* @__PURE__ */ jsxs5("div", { className: "px-2.5 pt-[17px] pb-3", children: [
-    groups.map((group) => /* @__PURE__ */ jsxs5("section", { className: "mb-2", children: [
-      /* @__PURE__ */ jsxs5("div", { className: "mb-1 flex items-center justify-between gap-2 px-3.5", children: [
-        /* @__PURE__ */ jsx8("p", { className: cx("min-w-0 truncate text-sm font-medium text-[#aaa]", fontSans), children: group.chainName }),
-        showWalletStatus ? /* @__PURE__ */ jsx8(ChainWalletStatus, { kind: group.chainKind }) : null
-      ] }),
-      group.tokens.map((token) => /* @__PURE__ */ jsx8(
-        TokenRow,
-        {
-          token,
-          selected: token.assetId === selectedAssetId,
-          recent: false,
-          showBalances,
-          formatted: showBalances ? getBalance(token) : null,
-          loadingBalance: showBalances && isBalanceLoading(token),
-          disabled: Boolean(isTokenDisabled?.(token)),
-          onSelect: () => onSelectToken(token),
-          className: rowClassName
-        },
-        token.assetId
-      ))
-    ] }, group.blockchain)),
-    !loading && !hasTokens ? /* @__PURE__ */ jsx8("p", { className: cx("px-3.5 py-4 text-[13px] text-[#606060]", fontSans), children: "No tokens found" }) : null
-  ] }) }) });
+  return /* @__PURE__ */ jsx7("div", { className: cx("min-h-0 flex-1 overflow-y-auto", thinScrollbar), children: /* @__PURE__ */ jsxs4("div", { className: "px-3 pt-3 pb-3", children: [
+    loading && tokens.length === 0 ? /* @__PURE__ */ jsx7(TokenListSkeleton, { rows: 6 }) : null,
+    tokens.map((token) => /* @__PURE__ */ jsx7(
+      TokenRow,
+      {
+        token,
+        selected: token.assetId === selectedAssetId,
+        showBalances,
+        formatted: showBalances ? getBalance(token) : null,
+        loadingBalance: showBalances && isBalanceLoading(token),
+        disabled: Boolean(isTokenDisabled?.(token)),
+        onSelect: () => onSelectToken(token),
+        className: rowClassName
+      },
+      token.assetId
+    )),
+    !loading && tokens.length === 0 ? /* @__PURE__ */ jsx7("p", { className: cx("px-[13px] py-4 text-[13px] text-[#606060]", fontSans), children: "No tokens found" }) : null
+  ] }) });
 }
 
 // src/token-select/types.ts
@@ -1161,8 +1208,9 @@ function ownerKey2(owners) {
 }
 
 // src/token-select/TokenSelectDialog.tsx
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
-var SEARCH_INPUT_CLASS = "h-[36px] rounded-[18px] border-[#e3e3e3] bg-[#f6f6f6] text-sm placeholder:text-black/30";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+var TOKEN_SEARCH_CLASS = "h-[50px] rounded-[12px] border-[#e3e3e3] bg-[#f6f6f6] pl-[43px] text-sm placeholder:text-black/30";
+var TOKEN_SEARCH_ICON_CLASS = "left-4 size-[19px] text-black";
 function ownerForToken(owners, token) {
   return owners[token.chain.chainKind] ?? null;
 }
@@ -1173,15 +1221,6 @@ function isNativeToken(token) {
   const addr = String(token.contractAddress || "").trim().toLowerCase();
   return !addr || addr === "native" || addr === "0x0000000000000000000000000000000000000000";
 }
-function railSelection(view) {
-  if (view.kind === "wallet") return { kind: "wallet" };
-  if (view.kind === "all") return { kind: "all" };
-  if (view.kind === "rail-chain") return { kind: "chain", blockchain: view.blockchain };
-  return { kind: "networks" };
-}
-function chainByCode(chains, blockchain) {
-  return chains.find((chain) => chain.blockchain === blockchain);
-}
 function TokenSelectDialog(props) {
   const {
     open,
@@ -1202,14 +1241,12 @@ function TokenSelectDialog(props) {
     closeClassName,
     contentClassName,
     searchClassName,
-    railClassName,
     rowClassName
   } = props;
   const payer = role === "payer";
   const showBalances = payer;
   const {
     wallet,
-    popularTokens: popularRefs,
     tokens,
     loading,
     stableSymbols,
@@ -1231,47 +1268,26 @@ function TokenSelectDialog(props) {
     () => showBalances ? { ...connectedOwners, ...balanceOwners } : {},
     [showBalances, connectedOwners, balanceOwners]
   );
-  const walletConnected = hasAnyOwner(connectedOwners);
-  const [search, setSearch] = useState2("");
-  const [view, setView] = useState2(payer ? { kind: "networks" } : { kind: "all" });
-  const [slideDirection, setSlideDirection] = useState2(1);
-  const networksScrollRef = useRef2(null);
-  const savedNetworksScroll = useRef2(0);
-  const walletConnectedRef = useRef2(walletConnected);
-  const payerRef = useRef2(payer);
-  const lockRef = useRef2(lockChainKind);
-  const tokensRef = useRef2(tokens);
-  walletConnectedRef.current = walletConnected;
-  payerRef.current = payer;
+  const [search, setSearch] = useState4("");
+  const [chainFilter, setChainFilter] = useState4(ALL_CHAIN_FILTER);
+  const userPickedChain = useRef3(false);
+  const lockRef = useRef3(lockChainKind);
+  const tokensRef = useRef3(tokens);
   lockRef.current = lockChainKind;
   tokensRef.current = tokens;
-  useEffect3(() => {
+  useEffect5(() => {
     if (!open) return;
+    userPickedChain.current = false;
     setSearch("");
-    const lock = lockRef.current;
-    if (lock) {
-      const filter = initialChainFilter(
-        lock,
-        getTokenSelectPrefs().recentBlockchains,
-        chainsFromTokens(tokensRef.current)
-      );
-      if (filter !== ALL_CHAIN_FILTER) {
-        setView({ kind: "rail-chain", blockchain: filter });
-        return;
-      }
-      return;
-    }
-    if (!payerRef.current) {
-      setView({ kind: "all" });
-      return;
-    }
-    setView(walletConnectedRef.current ? { kind: "wallet" } : { kind: "networks" });
+    setChainFilter(initialChainFilter(
+      lockRef.current,
+      getTokenSelectPrefs().recentBlockchains,
+      chainsFromTokens(tokensRef.current)
+    ));
   }, [open]);
-  useEffect3(() => {
-    if (!open || !lockChainKind) return;
-    const filter = initialChainFilter(lockChainKind, getTokenSelectPrefs().recentBlockchains, chainsFromTokens(tokens));
-    if (filter === ALL_CHAIN_FILTER) return;
-    setView((current) => current.kind === "rail-chain" ? current : { kind: "rail-chain", blockchain: filter });
+  useEffect5(() => {
+    if (!open || !lockChainKind || userPickedChain.current) return;
+    setChainFilter(initialChainFilter(lockChainKind, getTokenSelectPrefs().recentBlockchains, chainsFromTokens(tokens)));
   }, [open, lockChainKind, tokens]);
   const allowed = useMemo(() => {
     if (!allowedBlockchains || allowedBlockchains.length === 0) return null;
@@ -1288,11 +1304,11 @@ function TokenSelectDialog(props) {
   }, [tokens, allowed, excludeNative, payer]);
   const ownersKey = ownerKey2(owners);
   const tokenKey = useMemo(() => scopedTokens.map((token) => token.assetId).join("|"), [scopedTokens]);
-  const ownersRef = useRef2(owners);
-  const scopedRef = useRef2(scopedTokens);
+  const ownersRef = useRef3(owners);
+  const scopedRef = useRef3(scopedTokens);
   ownersRef.current = owners;
   scopedRef.current = scopedTokens;
-  useEffect3(() => {
+  useEffect5(() => {
     if (balanceMode !== "async" || !showBalances || !open || !hasAnyOwner(ownersRef.current) || !tokenKey) return;
     void ensurePayTokenBalances(ownersRef.current, scopedRef.current);
     const id = window.setInterval(() => {
@@ -1321,6 +1337,10 @@ function TokenSelectDialog(props) {
     return !entry || entry.status === "loading";
   }
   const availableChains = useMemo(() => chainsFromTokens(scopedTokens), [scopedTokens]);
+  const rangeTokens = useMemo(
+    () => scopedTokens.filter((token) => matchesChainFilter(token, chainFilter)),
+    [scopedTokens, chainFilter]
+  );
   const fundedBlockchains = useMemo(() => {
     const funded = /* @__PURE__ */ new Set();
     if (!showBalances) return funded;
@@ -1331,253 +1351,208 @@ function TokenSelectDialog(props) {
     }
     return funded;
   }, [availableChains, owners, scopedTokens, showBalances, balanceEntries, balanceMode, syncGetBalance, syncIsBalanceLoading]);
-  const railChains = useMemo(() => {
-    if (!payer) return sortChainsAlpha(availableChains);
-    const connected = payerRailChains(availableChains, owners, fundedBlockchains);
-    return sortChainsForSidebar(connected, scopedTokens, {
-      showBalances,
-      getBalanceUsd: (token) => tokenBalanceUsd(token, balanceOf(token))
-    });
-  }, [payer, availableChains, owners, fundedBlockchains, scopedTokens, showBalances, balanceEntries, balanceMode, syncGetBalance]);
-  const networkChains = useMemo(() => sortChainsAlpha(availableChains), [availableChains]);
-  useEffect3(() => {
-    if (!open || !payer || lockChainKind) return;
-    setView((current) => {
-      if (current.kind === "wallet" && !walletConnected) return { kind: "networks" };
-      if (current.kind === "rail-chain" && !railChains.some((chain) => chain.blockchain === current.blockchain)) {
-        return walletConnected ? { kind: "wallet" } : { kind: "networks" };
-      }
-      return current;
-    });
-  }, [open, payer, lockChainKind, walletConnected, railChains]);
-  const popularTokens = useMemo(
-    () => popularTokensForWallets(scopedTokens, popularRefs, (kind) => Boolean(connectedOwners[kind])),
-    [scopedTokens, popularRefs, connectedOwners]
-  );
-  const newestAssetId = showBalances ? prefs2.recentAssetIds[0] ?? null : null;
+  const dottedChains = useMemo(() => {
+    if (!payer) return [];
+    return payerRailChains(availableChains, owners, fundedBlockchains);
+  }, [payer, availableChains, owners, fundedBlockchains]);
+  const dottedSet = useMemo(() => new Set(dottedChains.map((chain) => chain.blockchain)), [dottedChains]);
+  const menuChains = useMemo(() => chainMenuOrder(availableChains, scopedTokens, {
+    dotted: dottedSet,
+    showBalances,
+    getBalanceUsd: (token) => tokenBalanceUsd(token, balanceOf(token))
+  }), [availableChains, scopedTokens, dottedSet, showBalances, balanceEntries, owners, balanceMode, syncGetBalance, syncIsBalanceLoading]);
+  const previewChains = useMemo(() => allChainPreview(availableChains), [availableChains]);
   const searching = search.trim().length > 0;
-  const sections = useMemo(() => {
-    if (view.kind === "wallet") {
-      const next = [];
-      const recent = recentTokensInOrder(scopedTokens, prefs2.recentAssetIds);
-      if (recent.length > 0) {
-        next.push({
-          id: "recent",
-          title: "Recently Used",
-          tokens: recent,
-          badgeAssetId: newestAssetId
-        });
-      }
-      const yours = positiveBalanceTokens(scopedTokens, usdOf);
-      if (yours.length > 0) {
-        next.push({ id: "yours", title: "Your Tokens", tokens: yours });
-      }
-      if (popularTokens.length > 0) {
-        next.push({ id: "popular", title: POPULAR_SECTION_TITLE, tokens: popularTokens });
-      }
-      return next;
-    }
-    if (view.kind === "all") {
-      const next = [];
-      if (popularTokens.length > 0) {
-        next.push({ id: "popular", title: POPULAR_SECTION_TITLE, tokens: popularTokens });
-      }
-      const sorted = scopedTokens.slice().sort((left, right) => compareTokensByPriority(left, right, stableSymbols));
-      next.push({ id: "all", tokens: sorted });
-      return next;
-    }
-    if (view.kind === "rail-chain" || view.kind === "network-chain") {
-      const matched = scopedTokens.filter((token) => token.blockchain === view.blockchain);
-      if (!payer) {
-        const next = [];
-        const popular = popularTokens.filter((token) => token.blockchain === view.blockchain);
-        if (popular.length > 0) {
-          next.push({ id: "popular", title: POPULAR_SECTION_TITLE, tokens: popular });
-        }
-        next.push({
-          id: view.blockchain,
-          tokens: matched.slice().sort((left, right) => compareTokensByPriority(left, right, stableSymbols))
-        });
-        return next;
+  const rangeWalletConnected = rangeTokens.some((token) => Boolean(owners[token.chain.chainKind]));
+  const recentTokens = useMemo(
+    () => recentTokensInOrder(rangeTokens, prefs2.recentAssetIds).slice(0, MAX_RECENTLY_USED),
+    [rangeTokens, prefs2.recentAssetIds]
+  );
+  const recentSearches = useMemo(
+    () => recentTokensInOrder(rangeTokens, prefs2.recentSearchAssetIds).slice(0, MAX_RECENT_SEARCHES),
+    [rangeTokens, prefs2.recentSearchAssetIds]
+  );
+  const yours = useMemo(() => {
+    if (!payer || !rangeWalletConnected) return [];
+    return positiveBalanceTokens(rangeTokens, usdOf);
+  }, [payer, rangeWalletConnected, rangeTokens, owners, balanceEntries, balanceMode, syncGetBalance, syncIsBalanceLoading]);
+  const trends = useMemo(() => trendTokensIn(rangeTokens, {
+    chainFilter,
+    sortRest: (rest) => {
+      if (chainFilter === ALL_CHAIN_FILTER) {
+        return rest.slice().sort((left, right) => compareTokensByPriority(left, right, stableSymbols));
       }
-      const chain = chainByCode(availableChains, view.blockchain);
-      return [{
-        id: view.blockchain,
-        tokens: sortTokensForChain(matched, {
-          withBalances: Boolean(chain && owners[chain.chainKind]),
-          usdOf,
-          loadingOf,
-          stableSymbols
-        }),
-        badgeAssetId: newestAssetId
-      }];
+      const chain = availableChains.find((item) => item.blockchain === chainFilter);
+      return sortTokensForChain(rest, {
+        withBalances: Boolean(chain && owners[chain.chainKind]),
+        usdOf,
+        loadingOf,
+        stableSymbols
+      });
     }
-    return [];
-  }, [
-    view,
-    payer,
-    scopedTokens,
-    prefs2.recentAssetIds,
-    newestAssetId,
-    balanceEntries,
-    owners,
-    popularTokens,
-    availableChains,
-    stableSymbols,
-    balanceMode,
-    syncGetBalance,
-    syncIsBalanceLoading
-  ]);
-  const searchGroups = useMemo(() => {
+  }), [rangeTokens, chainFilter, availableChains, owners, stableSymbols, balanceEntries, balanceMode, syncGetBalance, syncIsBalanceLoading]);
+  const receiverTokens = useMemo(
+    () => rangeTokens.slice().sort((left, right) => compareTokensByPriority(left, right, stableSymbols)),
+    [rangeTokens, stableSymbols]
+  );
+  const results = useMemo(() => {
     if (!searching) return [];
-    return groupSearchResults(scopedTokens, search, {
+    return searchTokens(rangeTokens, search, {
       role: payer ? "payer" : "receiver",
       usdOf,
-      loadingOf,
-      hasOwner: (kind) => Boolean(owners[kind]),
-      stableSymbols
+      loadingOf
     });
-  }, [searching, scopedTokens, search, payer, owners, stableSymbols, balanceEntries, balanceMode, syncGetBalance, syncIsBalanceLoading]);
-  function handleSelectChain(blockchain, fromNetworks) {
-    setLastBlockchain(blockchain);
-    if (fromNetworks) {
-      savedNetworksScroll.current = networksScrollRef.current?.scrollTop ?? 0;
-      setSlideDirection(1);
-      setView({ kind: "network-chain", blockchain });
-      return;
-    }
-    setView({ kind: "rail-chain", blockchain });
-  }
-  function handleBackToNetworks() {
-    setSlideDirection(-1);
-    setView({ kind: "networks" });
-  }
-  useLayoutEffect(() => {
-    if (view.kind !== "networks" || slideDirection !== -1) return;
-    const node = networksScrollRef.current;
-    if (!node) return;
-    node.scrollTop = savedNetworksScroll.current;
-  }, [view, slideDirection]);
-  function handleSelectToken(token) {
+  }, [searching, rangeTokens, search, payer, owners, balanceEntries, balanceMode, syncGetBalance, syncIsBalanceLoading]);
+  function handleSelectToken(token, fromSearch) {
     if (isBlockchainDisabled(token.blockchain, disabledBlockchains)) return;
     if (isChainKindLocked(token.chain.chainKind, lockChainKind)) return;
     if (payer) setLastToken(token.assetId, token.blockchain);
     else setLastBlockchain(token.blockchain);
+    if (fromSearch && search.trim()) setRecentSearch(token.assetId);
     onSelect({ token });
     onClose();
   }
-  const activeChain = view.kind === "rail-chain" || view.kind === "network-chain" ? chainByCode(availableChains, view.blockchain) : void 0;
-  const chainHeader = view.kind === "network-chain" ? { kind: "back", title: activeChain?.chainName ?? view.blockchain, onBack: handleBackToNetworks, walletKind: activeChain?.chainKind } : view.kind === "rail-chain" ? { kind: "chain", title: activeChain?.chainName ?? view.blockchain, walletKind: activeChain?.chainKind } : null;
-  const awaitingBalances = showBalances && sections.every((section) => section.tokens.length === 0) && scopedTokens.some((token) => loadingOf(token));
+  function clearVisibleSearches() {
+    if (chainFilter === ALL_CHAIN_FILTER) {
+      removeRecentSearches(prefs2.recentSearchAssetIds);
+      return;
+    }
+    const byId = new Map(scopedTokens.map((token) => [token.assetId, token]));
+    removeRecentSearches(prefs2.recentSearchAssetIds.filter((assetId) => byId.get(assetId)?.blockchain === chainFilter));
+  }
   const tokenDisabled = (token) => isBlockchainDisabled(token.blockchain, disabledBlockchains) || isChainKindLocked(token.chain.chainKind, lockChainKind);
-  const sliding = view.kind === "networks" || view.kind === "network-chain";
-  const tokenPane = /* @__PURE__ */ jsx9(
-    TokenPane,
-    {
-      sections,
-      header: chainHeader,
-      selectedAssetId,
-      loading: loading || awaitingBalances,
-      showBalances,
-      showWalletStatus: payer,
-      getBalance: balanceOf,
-      isBalanceLoading: loadingOf,
-      onSelectToken: handleSelectToken,
-      isTokenDisabled: tokenDisabled,
-      rowClassName
+  const sections = useMemo(() => {
+    if (loading) {
+      const next2 = [];
+      if (payer && rangeWalletConnected) {
+        next2.push({ id: "yours", title: YOUR_TOKENS_TITLE, icon: "database", tokens: [], skeletonRows: 2 });
+      }
+      if (payer && recentSearches.length > 0) {
+        next2.push({
+          id: "searches",
+          title: RECENT_SEARCHES_TITLE,
+          icon: "duration",
+          tokens: [],
+          skeletonRows: 2,
+          action: { label: "Clear", onClick: clearVisibleSearches }
+        });
+      }
+      if (payer) {
+        next2.push({ id: "trends", title: TRENDS_TOKEN_TITLE, icon: "trends", tokens: [], skeletonRows: 6 });
+      }
+      return next2;
     }
-  );
-  return /* @__PURE__ */ jsx9(
+    if (!payer) return [];
+    const next = [];
+    if (yours.length > 0) {
+      next.push({ id: "yours", title: YOUR_TOKENS_TITLE, icon: "database", tokens: yours });
+    }
+    if (recentSearches.length > 0) {
+      next.push({
+        id: "searches",
+        title: RECENT_SEARCHES_TITLE,
+        icon: "duration",
+        tokens: recentSearches,
+        action: { label: "Clear", onClick: clearVisibleSearches }
+      });
+    }
+    if (trends.length > 0) {
+      next.push({ id: "trends", title: TRENDS_TOKEN_TITLE, icon: "trends", tokens: trends });
+    }
+    return next;
+  }, [loading, payer, rangeWalletConnected, recentSearches, yours, trends, chainFilter, prefs2.recentSearchAssetIds, scopedTokens]);
+  return /* @__PURE__ */ jsx8(
     Dialog,
     {
       open,
       onClose,
       title,
-      titleClassName: cx(
-        "min-w-0 flex-1 truncate text-base font-medium text-[#606060] md:flex-none",
-        fontSans,
-        titleClassName
-      ),
-      headerClassName: cx("h-14 border-b border-[#e3e3e3] px-[22px] pr-4", headerClassName),
-      closeClassName: cx("md:ml-0", closeClassName),
+      titleClassName: cx("text-[18px] font-semibold text-black", fontSans, titleClassName),
+      headerClassName: cx("border-0 px-6 pt-[25px] pb-0", headerClassName),
+      closeClassName,
       contentClassName: cx("overflow-hidden", contentClassName),
-      headerAction: /* @__PURE__ */ jsx9(
-        SearchInput,
-        {
-          value: search,
-          onChange: setSearch,
-          placeholder: "search or paste address",
-          className: "ml-auto hidden w-[215px] shrink-0 md:block",
-          inputClassName: cx(SEARCH_INPUT_CLASS, searchClassName)
-        }
-      ),
       cardClassName: cx(
-        "w-full max-h-[90vh] gap-0 rounded-[12px] border border-[#e0e0e0] bg-[#fdfdfd] p-0 shadow-[0_0_40px_0_rgba(0,0,0,0.06)] md:w-[474px] md:rounded-[12px] md:p-0",
+        "w-full max-h-[90vh] gap-3 rounded-[12px] border border-[#e0e0e0] bg-[#fdfdfd] p-0 shadow-[0_0_40px_0_rgba(0,0,0,0.06)] md:w-[448px] md:rounded-[12px] md:p-0",
         className
       ),
-      children: /* @__PURE__ */ jsxs6("div", { className: "flex h-[min(520px,62vh)] min-h-0 flex-col overflow-hidden md:h-[min(555px,70vh)]", children: [
-        /* @__PURE__ */ jsx9(
-          SearchInput,
-          {
-            value: search,
-            onChange: setSearch,
-            placeholder: "search or paste address",
-            className: "mb-3 shrink-0 px-[22px] md:hidden",
-            inputClassName: cx(SEARCH_INPUT_CLASS, searchClassName)
-          }
-        ),
-        /* @__PURE__ */ jsxs6("div", { className: "flex min-h-0 flex-1", children: [
-          /* @__PURE__ */ jsx9(
-            NetworkRail,
+      children: /* @__PURE__ */ jsxs5("div", { className: "flex h-[min(620px,70vh)] min-h-0 flex-col gap-2.5", children: [
+        /* @__PURE__ */ jsxs5("div", { className: "flex shrink-0 items-center gap-3.5 px-5", children: [
+          /* @__PURE__ */ jsx8(
+            SearchInput2,
             {
-              role: payer ? "payer" : "receiver",
-              walletConnected,
-              selection: railSelection(view),
-              chains: railChains,
-              fundedBlockchains,
+              value: search,
+              onChange: setSearch,
+              placeholder: "search or paste address",
+              className: "min-w-0 flex-1",
+              iconClassName: TOKEN_SEARCH_ICON_CLASS,
+              inputClassName: cx(TOKEN_SEARCH_CLASS, searchClassName)
+            }
+          ),
+          /* @__PURE__ */ jsx8(
+            ChainSelect,
+            {
+              chains: menuChains,
+              previewChains,
+              dotted: dottedSet,
+              value: chainFilter,
+              onChange: (blockchain) => {
+                userPickedChain.current = true;
+                setChainFilter(blockchain);
+              },
               lockChainKind,
               disabledBlockchains,
-              disabledReason,
-              onSelectWallet: () => setView({ kind: "wallet" }),
-              onSelectAll: () => setView({ kind: "all" }),
-              onSelectNetworks: () => setView({ kind: "networks" }),
-              onSelectChain: (blockchain) => handleSelectChain(blockchain, false),
-              className: railClassName
+              disabledReason
             }
-          ),
-          searching ? /* @__PURE__ */ jsx9(
+          )
+        ] }),
+        /* @__PURE__ */ jsxs5("div", { className: "flex min-h-0 flex-1 flex-col gap-2.5", children: [
+          payer && loading && recentTokens.length > 0 ? /* @__PURE__ */ jsx8(RecentTileSkeletons, {}) : null,
+          payer && !loading ? /* @__PURE__ */ jsx8(RecentTiles, { tokens: recentTokens, onSelect: (token) => handleSelectToken(token, false), isTokenDisabled: tokenDisabled }) : null,
+          searching ? /* @__PURE__ */ jsx8(
             SearchResults,
             {
-              groups: searchGroups,
+              tokens: results,
               selectedAssetId,
               loading,
               showBalances,
-              showWalletStatus: payer,
               getBalance: balanceOf,
               isBalanceLoading: loadingOf,
-              onSelectToken: handleSelectToken,
+              onSelectToken: (token) => handleSelectToken(token, true),
               isTokenDisabled: tokenDisabled,
               rowClassName
             }
-          ) : sliding ? /* @__PURE__ */ jsx9(
-            PaneTransition,
+          ) : payer ? /* @__PURE__ */ jsx8(
+            TokenPane,
+            {
+              sections,
+              selectedAssetId,
+              showBalances,
+              getBalance: balanceOf,
+              isBalanceLoading: loadingOf,
+              onSelectToken: (token) => handleSelectToken(token, false),
+              isTokenDisabled: tokenDisabled,
+              rowClassName,
+              emptyLabel: recentTokens.length === 0 && sections.every((section) => section.tokens.length === 0 && !section.skeletonRows) ? "No tokens found" : null
+            }
+          ) : loading ? /* @__PURE__ */ jsx8("div", { className: "min-h-0 flex-1 overflow-y-auto px-3", children: /* @__PURE__ */ jsx8(TokenListSkeleton, { rows: 6 }) }) : /* @__PURE__ */ jsx8(
+            TokenPane,
             {
-              paneKey: view.kind === "network-chain" ? `network-chain:${view.blockchain}` : "networks",
-              direction: slideDirection,
-              children: view.kind === "networks" ? /* @__PURE__ */ jsx9(
-                ChainPane,
-                {
-                  chains: networkChains,
-                  showWalletStatus: payer,
-                  onSelectChain: (blockchain) => handleSelectChain(blockchain, true),
-                  lockChainKind,
-                  disabledBlockchains,
-                  disabledReason,
-                  scrollRef: networksScrollRef
-                }
-              ) : tokenPane
+              sections: [{
+                id: "all",
+                title: "",
+                icon: "trends",
+                tokens: receiverTokens
+              }],
+              selectedAssetId,
+              showBalances: false,
+              getBalance: balanceOf,
+              isBalanceLoading: loadingOf,
+              onSelectToken: (token) => handleSelectToken(token, false),
+              isTokenDisabled: tokenDisabled,
+              rowClassName,
+              emptyLabel: receiverTokens.length === 0 ? "No tokens found" : null
             }
-          ) : /* @__PURE__ */ jsx9("div", { className: "relative min-h-0 flex-1", children: tokenPane })
+          )
         ] })
       ] })
     }
@@ -1684,10 +1659,10 @@ function normalizePayConfig(source, options) {
       explorer: chain.explorer
     });
   }
-  const chainByCode2 = new Map(chains.map((chain) => [chain.blockchain, chain]));
+  const chainByCode = new Map(chains.map((chain) => [chain.blockchain, chain]));
   const tokens = [];
   for (const token of source.tokens) {
-    const chain = chainByCode2.get(token.network);
+    const chain = chainByCode.get(token.network);
     if (!chain) continue;
     const symbol = normalizeSymbol(token.symbol);
     if (!symbol) continue;
@@ -1720,7 +1695,6 @@ export {
   mapPayConfigSource,
   normalizePayConfig,
   ownerKey2 as ownerKey,
-  parsePopularTokens,
   refreshPayTokenBalance,
   tokenAssetId,
   usePayTokenBalance