@stableflow/pay-widgets 0.1.0 → 0.2.0-beta-e820becee0-20261012

package/dist/token-select/index.js

@@ -1,35 +1,26 @@
 // src/token-select/context.tsx
-import { createContext, useContext, useEffect as useEffect2, useMemo } from "react";
+import { useEffect } from "react";
+import { createContext, useContext } from "react";
 
 // src/token-select/balances.ts
 import { useSyncExternalStore } from "react";
 
 // src/token-select/config.ts
 var TOKEN_BALANCE_POLL_MS = 6e4;
-var CONFIG_STALE_MS = 30 * 60 * 1e3;
 var ALL_CHAIN_FILTER = "all";
-var DEFAULT_API_HOST = "https://api.stableflow.ai";
+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 MAX_RECENT_BLOCKCHAINS = 16;
 var MAX_RECENT_ASSETS = 3;
-var DISCONNECTED_CHAIN_ORDER = [
-  "near",
-  "sol",
-  "tron",
-  "eth",
-  "bsc",
-  "arb",
-  "base",
-  "pol",
-  "avax",
-  "op",
-  "bera",
-  "gnosis",
-  "xlayer",
-  "scroll"
-];
+var CHAIN_KIND_LABELS = {
+  evm: "EVM",
+  near: "Near",
+  solana: "Solana",
+  tron: "Tron",
+  zec: "Zcash"
+};
 var DEFAULT_CHAIN_KINDS = {
   eth: "evm",
   base: "evm",
@@ -52,7 +43,23 @@ var DEFAULT_CHAIN_KINDS = {
 var listeners = /* @__PURE__ */ new Set();
 var balances = {};
 var reader = null;
+var syncReader = null;
+var tokensById = /* @__PURE__ */ new Map();
 var chainInflight = /* @__PURE__ */ new Map();
+function configureBalanceReaders(options) {
+  reader = options.readBalances ?? null;
+  if (!options.readBalances && options.getBalance) {
+    syncReader = {
+      getBalance: options.getBalance,
+      isBalanceLoading: options.isBalanceLoading ?? (() => false)
+    };
+    return;
+  }
+  syncReader = null;
+}
+function setBalanceTokens(tokens) {
+  tokensById = new Map(tokens.map((token) => [token.assetId, token]));
+}
 function emit() {
   balances = { ...balances };
   for (const listener of listeners) listener();
@@ -87,15 +94,25 @@ function withStaleOnError(prev, next) {
   if (prev?.raw == null && prev?.formatted == null) return next;
   return { ...next, raw: prev.raw, formatted: prev.formatted, updatedAt: prev.updatedAt };
 }
-function setBalanceReader(next) {
-  reader = next;
-}
 function clearPayTokenBalances() {
   balances = {};
   emit();
 }
+function syncBalance(owner, assetId) {
+  if (!syncReader) return void 0;
+  const token = tokensById.get(assetId);
+  if (!token) return void 0;
+  const loading = syncReader.isBalanceLoading(token, owner);
+  const formatted = syncReader.getBalance(token, owner);
+  if (loading && (formatted == null || formatted === "")) {
+    return { raw: null, formatted: null, status: "loading", error: null, updatedAt: null };
+  }
+  if (formatted == null || formatted === "") return void 0;
+  return { raw: null, formatted, status: "success", error: null, updatedAt: null };
+}
 function getPayTokenBalance(owner, assetId) {
   if (!owner || !assetId) return void 0;
+  if (syncReader) return syncBalance(owner, assetId);
   return balances[`${owner}:${assetId}`] ?? balances[`${owner.toLowerCase()}:${assetId}`];
 }
 function usePayTokenBalance(owner, assetId) {
@@ -198,6 +215,7 @@ async function fetchChain(owner, tokens, force) {
   });
 }
 async function ensurePayTokenBalances(owners, tokens, opts) {
+  if (syncReader || !reader) return;
   const force = Boolean(opts?.force);
   const groups = groupByChain(tokens);
   await Promise.all(Array.from(groups.values()).map((group) => {
@@ -208,306 +226,66 @@ async function ensurePayTokenBalances(owners, tokens, opts) {
   }));
 }
 
-// src/token-select/pay-config.ts
-import { useCallback, useEffect, useSyncExternalStore as useSyncExternalStore2 } from "react";
-
-// src/token-select/logos.ts
-var LOGO_HOST = "https://assets.dapdap.net";
-var CHAIN_LOGO_ALIAS = {
-  eth: "ethereum",
-  ethereum: "ethereum",
-  base: "base",
-  arb: "arbitrum",
-  arbitrum: "arbitrum",
-  op: "optimism",
-  optimism: "optimism",
-  pol: "polygon",
-  polygon: "polygon",
-  bsc: "bsc",
-  avax: "avalanche",
-  avalanche: "avalanche",
-  gnosis: "gnosis",
-  scroll: "scroll",
-  xlayer: "xlayer",
-  bera: "berachain",
-  berachain: "berachain",
-  near: "near",
-  sol: "solana",
-  solana: "solana",
-  tron: "tron",
-  zec: "zcash",
-  zcash: "zcash"
-};
-function logoPath(path) {
-  const normalized = path.startsWith("/") ? path : `/${path}`;
-  return `${LOGO_HOST}${normalized}`;
-}
-function evmTypeLogoUrl() {
-  return logoPath("/stableflow/networks/type-evm.svg");
-}
-function chainLogoUrl(blockchainOrNetwork) {
-  const key = String(blockchainOrNetwork || "").toLowerCase();
-  const file = CHAIN_LOGO_ALIAS[key] || key.replace(/\s+/g, "");
-  return logoPath(`/stableflow/networks/${file}.png`);
-}
-function tokenLogoUrl(symbol) {
-  const upper = String(symbol || "").toUpperCase();
-  const file = upper === "USDT0" ? "usdt" : upper.toLowerCase();
-  return logoPath(`/stableflow/tokens/${file}.png`);
-}
-
-// src/token-select/pay-config.ts
-var ZERO_ADDRESS = "0x0000000000000000000000000000000000000000";
-var WRAP_NEAR_CONTRACT = "wrap.near";
-var listeners2 = /* @__PURE__ */ new Set();
-var chainKindOverrides = {};
-var snapshot = {
-  apiHost: DEFAULT_API_HOST,
-  chains: [],
-  tokens: [],
-  source: null,
-  status: "idle",
-  error: null,
-  fetchedAt: null
-};
-var inflight = null;
-function emit2(next) {
-  snapshot = next;
-  for (const listener of listeners2) listener();
-}
-function subscribe2(listener) {
-  listeners2.add(listener);
-  return () => listeners2.delete(listener);
-}
-function getPayConfigSnapshot() {
-  return snapshot;
-}
-function setChainKindOverrides(overrides) {
-  chainKindOverrides = overrides ?? {};
-  if (snapshot.source) {
-    const normalized = normalizePayConfig(snapshot.source, chainKindOverrides);
-    emit2({ ...snapshot, chains: normalized.chains, tokens: normalized.tokens });
-  }
-}
-function asRecord(value) {
-  if (!value || typeof value !== "object" || Array.isArray(value)) return null;
-  return value;
-}
-function apiText(value) {
-  if (typeof value === "string") return value.trim();
-  if (typeof value === "number" && Number.isFinite(value)) return String(value);
-  return "";
-}
-function apiNumber(value) {
-  if (typeof value === "number" && Number.isFinite(value)) return value;
-  if (typeof value === "string" && value.trim()) {
-    const parsed = Number(value);
-    if (Number.isFinite(parsed)) return parsed;
-  }
-  return null;
-}
-function asBoolean(value, fallback = true) {
-  if (typeof value === "boolean") return value;
-  if (typeof value === "string") {
-    const lower = value.trim().toLowerCase();
-    if (lower === "true") return true;
-    if (lower === "false") return false;
-  }
-  return fallback;
-}
-function mapSourceChain(raw) {
-  const row = asRecord(raw) ?? {};
-  return {
-    network: apiText(row.network),
-    chainId: apiText(row.chain_id ?? row.chainId),
-    chainName: apiText(row.chain_name ?? row.chainName),
-    logo: apiText(row.logo),
-    explorer: apiText(row.explorer)
-  };
-}
-function mapSourceToken(raw) {
-  const row = asRecord(raw) ?? {};
-  return {
-    symbol: apiText(row.symbol),
-    network: apiText(row.network),
-    decimals: apiNumber(row.decimals) ?? 0,
-    contractAddress: apiText(row.contract_address ?? row.contractAddress),
-    price: apiText(row.price),
-    supportPayment: asBoolean(row.support_payment ?? row.supportPayment),
-    supportReceive: asBoolean(row.support_receive ?? row.supportReceive)
-  };
-}
-function configBody(raw) {
-  const row = asRecord(raw) ?? {};
-  const data = asRecord(row.data);
-  if (typeof row.code === "number" && data) return data;
-  return row;
-}
-function mapPayConfigSource(raw) {
-  const row = configBody(raw);
-  const chains = Array.isArray(row.chains) ? row.chains.map(mapSourceChain) : [];
-  const tokens = Array.isArray(row.tokens) ? row.tokens.map(mapSourceToken) : [];
-  return { chains, tokens };
-}
-function chainKindFor(network, overrides = chainKindOverrides) {
-  const key = network.trim().toLowerCase();
-  if (!key) return null;
-  return overrides[key] ?? DEFAULT_CHAIN_KINDS[key] ?? null;
-}
-function normalizeSymbol(symbol) {
-  const upper = symbol.trim().toUpperCase();
-  if (!upper) return null;
-  if (upper === "USDT0") return "USDT";
-  if (upper === "WNEAR") return "NEAR";
-  return upper;
-}
-function tokenAssetId(network, symbol, contractAddress) {
-  const addr = String(contractAddress || "").trim();
-  return `${network}:${symbol}:${addr || "native"}`;
-}
-function isNativeAddress(contractAddress) {
-  const addr = String(contractAddress || "").trim();
-  if (!addr) return true;
-  const lower = addr.toLowerCase();
-  return lower === "native" || lower === ZERO_ADDRESS;
-}
-function normalizePayConfig(source, overrides = chainKindOverrides) {
-  const chains = [];
-  for (const chain of source.chains) {
-    const chainKind = chainKindFor(chain.network, overrides);
-    if (!chainKind || !chain.network) continue;
-    chains.push({
-      blockchain: chain.network,
-      chainName: chain.chainName || chain.network,
-      chainKind,
-      chainId: chain.chainId || void 0,
-      logo: chain.logo || chainLogoUrl(chain.network),
-      explorer: chain.explorer
-    });
-  }
-  const chainByCode = new Map(chains.map((chain) => [chain.blockchain, chain]));
-  const tokens = [];
-  for (const token of source.tokens) {
-    const chain = chainByCode.get(token.network);
-    if (!chain) continue;
-    const symbol = normalizeSymbol(token.symbol);
-    if (!symbol) continue;
-    if (!Number.isInteger(token.decimals) || token.decimals < 0) continue;
-    const contractAddress = token.contractAddress.trim() || null;
-    tokens.push({
-      assetId: tokenAssetId(token.network, symbol, contractAddress),
-      symbol,
-      providerSymbol: token.symbol,
-      blockchain: token.network,
-      decimals: token.decimals,
-      contractAddress,
-      price: Number(token.price || 1),
-      logo: tokenLogoUrl(symbol),
-      supportPayment: token.supportPayment,
-      supportReceive: token.supportReceive,
-      chain
-    });
-  }
-  const hasNearWrap = tokens.some((token) => token.symbol === "NEAR" && token.blockchain === "near" && token.contractAddress?.toLowerCase() === WRAP_NEAR_CONTRACT);
-  const visible = hasNearWrap ? tokens.filter((token) => !(token.symbol === "NEAR" && token.blockchain === "near" && isNativeAddress(token.contractAddress))) : tokens;
-  return { chains, tokens: visible };
-}
-function configUrl(apiHost) {
-  return `${apiHost.replace(/\/$/, "")}/v1/pay/config`;
-}
-async function load(apiHost, force) {
-  const fresh = snapshot.apiHost === apiHost && snapshot.status === "success" && snapshot.fetchedAt != null && Date.now() - snapshot.fetchedAt < CONFIG_STALE_MS;
-  if (!force && fresh) return;
-  if (inflight && !force) return inflight;
-  emit2({ ...snapshot, apiHost, status: snapshot.tokens.length > 0 ? snapshot.status : "loading", error: null });
-  const run = (async () => {
-    try {
-      const response = await fetch(configUrl(apiHost));
-      if (!response.ok) throw new Error(`Config request failed (${response.status})`);
-      const source = mapPayConfigSource(await response.json());
-      const normalized = normalizePayConfig(source, chainKindOverrides);
-      emit2({
-        apiHost,
-        source,
-        chains: normalized.chains,
-        tokens: normalized.tokens,
-        status: "success",
-        error: null,
-        fetchedAt: Date.now()
-      });
-    } catch (cause) {
-      const message = cause instanceof Error ? cause.message : "Failed to load config";
-      emit2({
-        ...snapshot,
-        apiHost,
-        status: snapshot.source ? "success" : "error",
-        error: message
-      });
-    } finally {
-      inflight = null;
-    }
-  })();
-  inflight = run;
-  return run;
-}
-function refetchPayConfig(apiHost = snapshot.apiHost) {
-  return load(apiHost, true);
-}
-function usePayConfigSnapshot() {
-  return useSyncExternalStore2(subscribe2, getPayConfigSnapshot, getPayConfigSnapshot);
-}
-function usePayConfig(options) {
-  const apiHost = options?.apiHost?.trim() || DEFAULT_API_HOST;
-  const current = useSyncExternalStore2(subscribe2, getPayConfigSnapshot, getPayConfigSnapshot);
-  const refetch = useCallback(() => {
-    void refetchPayConfig(apiHost);
-  }, [apiHost]);
-  useEffect(() => {
-    void load(apiHost, false);
-  }, [apiHost]);
-  return {
-    chains: current.apiHost === apiHost ? current.chains : [],
-    tokens: current.apiHost === apiHost ? current.tokens : [],
-    source: current.apiHost === apiHost ? current.source : null,
-    status: current.apiHost === apiHost ? current.status : "loading",
-    error: current.apiHost === apiHost ? current.error : null,
-    refetch
-  };
-}
-
 // src/token-select/context.tsx
 import { jsx } from "react/jsx-runtime";
 var PayWidgetsContext = createContext(null);
+function isProduction() {
+  const env = globalThis.process?.env?.NODE_ENV;
+  return env === "production";
+}
+function warnBalanceMode(readBalances, getBalance) {
+  if (isProduction()) return;
+  if (readBalances && getBalance) {
+    console.warn("PayWidgetsProvider: both readBalances and getBalance were passed; using readBalances.");
+    return;
+  }
+  if (!readBalances && !getBalance) {
+    console.warn("PayWidgetsProvider: pass readBalances or getBalance so token balances can load.");
+  }
+}
 function PayWidgetsProvider(props) {
   const {
-    apiHost,
+    tokens,
+    loading = false,
     popularTokens = [],
     wallet,
     readBalances,
-    onConfig,
+    getBalance,
+    isBalanceLoading,
     onCopyAddress,
-    chainKinds,
+    stableSymbols = [...DEFAULT_STABLE_SYMBOLS],
+    chainKindLabels = {},
     children
   } = props;
-  const config = usePayConfig({ apiHost });
-  useEffect2(() => {
-    setChainKindOverrides(chainKinds);
-  }, [chainKinds]);
-  useEffect2(() => {
-    setBalanceReader(readBalances);
-    return () => setBalanceReader(null);
-  }, [readBalances]);
-  useEffect2(() => {
-    if (config.status === "success" && config.source) onConfig?.(config.source);
-  }, [config.source, config.status, onConfig]);
+  useEffect(() => {
+    warnBalanceMode(readBalances, getBalance);
+    configureBalanceReaders({
+      readBalances: readBalances ?? null,
+      getBalance: getBalance ?? null,
+      isBalanceLoading: isBalanceLoading ?? null
+    });
+    return () => configureBalanceReaders({});
+  }, [readBalances, getBalance, isBalanceLoading]);
+  useEffect(() => {
+    setBalanceTokens(tokens);
+  }, [tokens]);
   const connected = Object.values(wallet.accounts).some((account) => Boolean(account?.address?.trim()));
-  useEffect2(() => {
+  useEffect(() => {
     if (!connected) clearPayTokenBalances();
   }, [connected]);
-  const value = useMemo(
-    () => ({ wallet, popularTokens, onCopyAddress }),
-    [wallet, popularTokens, onCopyAddress]
-  );
+  const balanceMode = readBalances ? "async" : getBalance ? "sync" : "none";
+  const value = {
+    tokens,
+    loading,
+    wallet,
+    popularTokens,
+    stableSymbols,
+    chainKindLabels,
+    onCopyAddress,
+    balanceMode,
+    getBalance: balanceMode === "sync" ? getBalance ?? null : null,
+    isBalanceLoading: balanceMode === "sync" ? isBalanceLoading ?? null : null
+  };
   return /* @__PURE__ */ jsx(PayWidgetsContext.Provider, { value, children });
 }
 function usePayWidgets() {
@@ -519,83 +297,23 @@ function usePayWidgets() {
 }
 
 // src/token-select/TokenSelectDialog.tsx
-import { useEffect as useEffect3, useMemo as useMemo2, useRef, useState as useState2, useSyncExternalStore as useSyncExternalStore4 } from "react";
+import { useEffect as useEffect2, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore as useSyncExternalStore3 } from "react";
 import { Dialog } from "@stableflow/pay-ui/dialog";
-import { SearchInput as SearchInput2 } from "@stableflow/pay-ui/search-input";
+import { SearchInput } from "@stableflow/pay-ui/search-input";
 
-// src/token-select/prefs.ts
-import { useSyncExternalStore as useSyncExternalStore3 } from "react";
-var EMPTY_PREFS = { recentAssetIds: [], recentBlockchains: [] };
-function rememberRecentAsset(recent, assetId) {
-  const id = assetId.trim();
-  if (!id) return recent;
-  return [id, ...recent.filter((item) => item !== id)].slice(0, MAX_RECENT_ASSETS);
-}
-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 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 };
-}
-function readStorage() {
-  if (typeof localStorage === "undefined") return EMPTY_PREFS;
-  try {
-    const raw = localStorage.getItem(TOKEN_SELECT_PREFS_STORAGE_KEY);
-    if (!raw) return EMPTY_PREFS;
-    const parsed = JSON.parse(raw);
-    const version = typeof parsed.version === "number" ? parsed.version : 0;
-    const payload = parsed && typeof parsed === "object" && "state" in parsed ? parsed.state : parsed;
-    return migrateTokenSelectPrefs(payload, version);
-  } catch {
-    return EMPTY_PREFS;
-  }
-}
-function writeStorage(state) {
-  if (typeof localStorage === "undefined") return;
-  localStorage.setItem(TOKEN_SELECT_PREFS_STORAGE_KEY, JSON.stringify({
-    state,
-    version: TOKEN_SELECT_PREFS_VERSION
-  }));
-}
-var prefs = readStorage();
-var listeners3 = /* @__PURE__ */ new Set();
-function emit3(next) {
-  prefs = next;
-  writeStorage(next);
-  for (const listener of listeners3) listener();
-}
-function subscribe3(listener) {
-  listeners3.add(listener);
-  return () => listeners3.delete(listener);
-}
-function getTokenSelectPrefs() {
-  return prefs;
-}
-function setLastToken(assetId, blockchain) {
-  emit3({
-    recentAssetIds: rememberRecentAsset(prefs.recentAssetIds, assetId),
-    recentBlockchains: rememberRecentBlockchain(prefs.recentBlockchains, blockchain)
-  });
-}
-function setLastBlockchain(blockchain) {
-  emit3({
-    ...prefs,
-    recentBlockchains: rememberRecentBlockchain(prefs.recentBlockchains, blockchain)
-  });
-}
-function useTokenSelectPrefs() {
-  return useSyncExternalStore3(subscribe3, getTokenSelectPrefs, getTokenSelectPrefs);
-}
+// src/token-select/chain-pane.tsx
+import { IconChevron } from "@stableflow/pay-ui/icons/chevron";
+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/format.ts
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 var fontSans = "[font-family:Montserrat,PingFang_SC,system-ui,sans-serif]";
+var thinScrollbar = "[&::-webkit-scrollbar]:w-[4px] [&::-webkit-scrollbar-thumb]:rounded-[12px] [&::-webkit-scrollbar-thumb]:bg-[#d9d9d9] [&::-webkit-scrollbar-track]:bg-transparent supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-width:thin] [scrollbar-color:#d9d9d9_transparent]";
 function cx(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -605,13 +323,8 @@ function formatAddress(address, prefix = 4, suffix = 5) {
   if (address.length <= prefix + suffix) return address;
   return `${address.slice(0, prefix)}...${address.slice(-suffix)}`;
 }
-function chainKindLabel(kind) {
-  if (kind === "evm") return "EVM";
-  if (kind === "near") return "Near";
-  if (kind === "solana") return "Solana";
-  if (kind === "tron") return "Tron";
-  if (kind === "zec") return "Zcash";
-  return kind;
+function chainKindLabel(kind, labels) {
+  return labels?.[kind] ?? CHAIN_KIND_LABELS[kind] ?? kind;
 }
 function formatDisplayAmount(value, options = {}) {
   const maxDecimals = options.maxDecimals ?? 2;
@@ -633,14 +346,7 @@ function formatDisplayAmount(value, options = {}) {
   return `${prefix}${negative ? "-" : ""}${body}`;
 }
 
-// src/token-select/chain-pane.tsx
-import { useState } from "react";
-import { IconArrowDown } from "@stableflow/pay-ui/icons/arrow-down";
-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";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function stop(event) {
   event.preventDefault();
@@ -710,22 +416,14 @@ function ChainWalletStatus({ kind }) {
 }
 
 // src/token-select/utils.ts
-function groupEvmChains(chains) {
-  const evm = chains.filter((chain) => chain.chainKind === "evm");
-  if (evm.length === 0) return chains.map((chain) => ({ kind: "chain", chain }));
-  let placed = false;
-  const entries = [];
-  for (const chain of chains) {
-    if (chain.chainKind === "evm") {
-      if (!placed) {
-        entries.push({ kind: "evm", chains: evm });
-        placed = true;
-      }
-      continue;
-    }
-    entries.push({ kind: "chain", chain });
+var ZERO_ADDRESS = "0x0000000000000000000000000000000000000000";
+function chainsFromTokens(tokens) {
+  const byCode = /* @__PURE__ */ new Map();
+  for (const token of tokens) {
+    const code = token.chain.blockchain || token.blockchain;
+    if (!byCode.has(code)) byCode.set(code, token.chain);
   }
-  return entries;
+  return Array.from(byCode.values());
 }
 function tokenBalanceUsd(token, formatted) {
   if (formatted == null || formatted === "") return -1;
@@ -741,10 +439,6 @@ 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);
@@ -764,9 +458,6 @@ function chainBalanceUsd(blockchain, tokens, getBalanceUsd) {
   }
   return total;
 }
-var DISCONNECTED_CHAIN_RANK = new Map(
-  DISCONNECTED_CHAIN_ORDER.map((code, index) => [code, index])
-);
 function parsePopularTokens(raw) {
   if (!raw?.trim()) return [];
   const refs = [];
@@ -790,16 +481,10 @@ function popularTokensForWallets(tokens, configured, isChainConnected) {
   }
   return result;
 }
+function sortChainsAlpha(chains) {
+  return chains.slice().sort((left, right) => left.chainName.localeCompare(right.chainName));
+}
 function sortChainsForSidebar(chains, tokens, options) {
-  if (!options.walletConnected) {
-    const tail = DISCONNECTED_CHAIN_ORDER.length;
-    return chains.map((chain, index) => ({ chain, index })).sort((left, right) => {
-      const leftRank = DISCONNECTED_CHAIN_RANK.get(left.chain.blockchain) ?? tail;
-      const rightRank = DISCONNECTED_CHAIN_RANK.get(right.chain.blockchain) ?? tail;
-      if (leftRank !== rightRank) return leftRank - rightRank;
-      return left.index - right.index;
-    }).map((item) => item.chain);
-  }
   if (!options.showBalances) return chains.slice();
   return chains.slice().sort((left, right) => {
     const leftUsd = chainBalanceUsd(left.blockchain, tokens, options.getBalanceUsd);
@@ -808,6 +493,13 @@ function sortChainsForSidebar(chains, tokens, options) {
     return left.chainName.localeCompare(right.chainName);
   });
 }
+function payerRailChains(chains, owners, fundedSet) {
+  return chains.filter((chain) => {
+    if (!owners[chain.chainKind]) return false;
+    if (chain.chainKind === "evm" && !fundedSet.has(chain.blockchain)) return false;
+    return true;
+  });
+}
 function initialChainFilter(lockChainKind, recentBlockchains, chains) {
   if (!lockChainKind) return ALL_CHAIN_FILTER;
   const matching = chains.filter((chain) => chain.chainKind === lockChainKind);
@@ -848,9 +540,6 @@ 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),
@@ -858,6 +547,90 @@ function positiveBalanceTokens(tokens, getBalanceUsd) {
     () => false
   );
 }
+function isGasToken(token) {
+  const addr = String(token.contractAddress || "").trim().toLowerCase();
+  if (!addr || addr === "native" || addr === ZERO_ADDRESS) return true;
+  return token.blockchain === "near" && token.symbol.toUpperCase() === "NEAR";
+}
+function stableSymbolIndex(symbol, stableSymbols) {
+  const upper = symbol.toUpperCase();
+  return stableSymbols.findIndex((item) => item.toUpperCase() === upper);
+}
+function tokenPriority(token, stableSymbols = DEFAULT_STABLE_SYMBOLS) {
+  if (stableSymbolIndex(token.symbol, stableSymbols) >= 0) return 0;
+  if (isGasToken(token)) return 1;
+  return 2;
+}
+function compareTokensByPriority(left, right, stableSymbols = DEFAULT_STABLE_SYMBOLS) {
+  const leftPriority = tokenPriority(left, stableSymbols);
+  const rightPriority = tokenPriority(right, stableSymbols);
+  if (leftPriority !== rightPriority) return leftPriority - rightPriority;
+  if (leftPriority === 0) {
+    const leftIndex = stableSymbolIndex(left.symbol, stableSymbols);
+    const rightIndex = stableSymbolIndex(right.symbol, stableSymbols);
+    if (leftIndex !== rightIndex) return leftIndex - rightIndex;
+  }
+  return left.symbol.localeCompare(right.symbol) || left.chain.chainName.localeCompare(right.chain.chainName);
+}
+function sortTokensForChain(tokens, options) {
+  const stableSymbols = options.stableSymbols ?? DEFAULT_STABLE_SYMBOLS;
+  if (!options.withBalances) {
+    return tokens.slice().sort((left, right) => compareTokensByPriority(left, right, stableSymbols));
+  }
+  return tokens.slice().sort((left, right) => {
+    const leftRank = tokenBalanceRank(options.usdOf(left), options.loadingOf(left));
+    const rightRank = tokenBalanceRank(options.usdOf(right), options.loadingOf(right));
+    if (leftRank !== rightRank) return leftRank - rightRank;
+    if (leftRank === BALANCE_RANK_FUNDED) {
+      const byUsd = options.usdOf(right) - options.usdOf(left);
+      if (byUsd !== 0) return byUsd;
+    }
+    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);
+  }
+  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
+  }));
+}
 function recentTokensInOrder(tokens, recentAssetIds) {
   const byId = new Map(tokens.map((token) => [token.assetId, token]));
   const result = [];
@@ -870,109 +643,86 @@ function recentTokensInOrder(tokens, recentAssetIds) {
 
 // src/token-select/chain-pane.tsx
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-function lockReason(lockChainKind) {
-  return `Recipient address is on ${chainKindLabel(lockChainKind)}; edit the recipient to change chain`;
+function lockReason(lockChainKind, labels) {
+  return `Recipient address is on ${chainKindLabel(lockChainKind, labels)}; edit the recipient to change chain`;
 }
 function ChainPane(props) {
   const {
     chains,
-    fundedBlockchains,
     showWalletStatus = true,
-    onSelectFilter,
+    onSelectChain,
     lockChainKind = null,
     disabledBlockchains = null,
-    disabledReason
+    disabledReason,
+    scrollRef
   } = props;
-  const [evmExpanded, setEvmExpanded] = useState(true);
+  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 });
   }
-  function chainRow(chain, nested) {
-    const locked = isChainKindLocked(chain.chainKind, lockChainKind);
-    const chainDisabled = isBlockchainDisabled(chain.blockchain, disabledBlockchains);
-    const disabled = locked || chainDisabled;
-    const reason = chainDisabled ? disabledReason : locked && lockChainKind ? lockReason(lockChainKind) : void 0;
-    return /* @__PURE__ */ jsxs2(
-      "div",
-      {
-        className: cx(
-          "flex min-h-14 w-full items-center gap-2 rounded-[12px] px-2 md:min-h-[66px] md:gap-3 md:px-3",
-          disabled ? "opacity-40" : "hover:bg-[#F6F6F6]",
-          nested ? "min-h-12 md:min-h-14" : ""
-        ),
-        children: [
-          wrapDisabled(
-            disabled,
-            reason,
-            /* @__PURE__ */ jsxs2(
+  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;
-                  onSelectFilter(chain.blockchain);
+                  onSelectChain(chain.blockchain);
                 },
                 className: cx(
-                  "flex min-w-0 flex-1 items-center gap-3 border-0 bg-transparent text-left",
+                  "inline-flex shrink-0 border-0 bg-transparent p-0 text-[#606060]",
                   disabled ? "cursor-not-allowed" : "cursor-pointer"
                 ),
-                children: [
-                  /* @__PURE__ */ jsxs2("span", { className: "relative size-8 shrink-0", children: [
-                    /* @__PURE__ */ jsx3("img", { src: chain.logo, alt: "", className: "size-8 object-cover" }),
-                    fundedBlockchains.has(chain.blockchain) ? /* @__PURE__ */ jsx3("span", { className: "absolute -top-0.5 -right-0.5 size-2 rounded-full border border-white bg-[#06f] md:size-2.5" }) : null
-                  ] }),
-                  /* @__PURE__ */ jsx3("span", { className: cx("truncate text-sm font-medium text-black md:text-base", fontSans), children: chain.chainName })
-                ]
+                children: /* @__PURE__ */ jsx3(IconChevron, {})
               }
             )
-          ),
-          showWalletStatus && !nested ? /* @__PURE__ */ jsx3(ChainWalletStatus, { kind: chain.chainKind }) : null
-        ]
-      },
-      chain.blockchain
-    );
-  }
-  return /* @__PURE__ */ jsxs2("div", { className: "flex min-h-0 flex-1 flex-col", children: [
-    /* @__PURE__ */ jsx3("p", { className: cx("shrink-0 text-sm font-medium text-[#aaa]", fontSans), children: "All Networks" }),
-    /* @__PURE__ */ jsx3("div", { className: "mt-3 flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto", children: groupEvmChains(chains).map((entry) => {
-      if (entry.kind === "chain") return chainRow(entry.chain, false);
-      return /* @__PURE__ */ jsxs2("div", { className: "rounded-[12px] px-2 md:px-3 py-2 hover:bg-[rgba(185,215,255,0.1)]", children: [
-        /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ jsx3("span", { className: "flex size-8 shrink-0 items-center justify-center rounded-[10px] bg-[#627EEA]", children: /* @__PURE__ */ jsx3("img", { src: evmTypeLogoUrl(), alt: "", className: "size-5 object-contain" }) }),
-            /* @__PURE__ */ jsx3("span", { className: cx("truncate text-sm font-medium text-black md:text-base", fontSans), children: "EVM-based" })
-          ] }),
-          showWalletStatus ? /* @__PURE__ */ jsx3(ChainWalletStatus, { kind: "evm" }) : /* @__PURE__ */ jsx3("span", { className: "min-w-0 flex-1" })
-        ] }),
-        /* @__PURE__ */ jsxs2("div", { className: "mt-2 flex items-center gap-2", children: [
-          evmExpanded ? /* @__PURE__ */ jsx3("span", { className: "min-w-0 flex-1" }) : /* @__PURE__ */ jsx3("span", { className: "flex min-w-0 flex-1 overflow-hidden", children: entry.chains.map((chain, index) => /* @__PURE__ */ jsx3(
-            "img",
-            {
-              src: chain.logo,
-              alt: "",
-              style: { zIndex: entry.chains.length - index },
-              className: index === 0 ? "relative size-4 shrink-0 rounded-[4px] border border-white object-cover" : "relative -ml-1.5 size-4 shrink-0 rounded-[4px] border border-white object-cover"
-            },
-            chain.blockchain
-          )) }),
-          /* @__PURE__ */ jsx3(
-            "button",
-            {
-              type: "button",
-              "aria-expanded": evmExpanded,
-              "aria-label": evmExpanded ? "Collapse EVM-based" : "Expand EVM-based",
-              onClick: () => setEvmExpanded((open) => !open),
-              className: "ml-auto inline-flex shrink-0 cursor-pointer border-0 bg-transparent p-1 text-[#606060]",
-              children: /* @__PURE__ */ jsx3(IconArrowDown, { className: cx("size-3 transition-transform", evmExpanded ? "rotate-180" : "") })
-            }
-          )
-        ] }),
-        evmExpanded ? /* @__PURE__ */ jsx3("div", { className: "mt-2 border-t border-[#e3e3e3] pt-1", children: entry.chains.map((chain) => chainRow(chain, true)) }) : null
-      ] }, "evm");
+          ]
+        },
+        chain.blockchain
+      );
     }) })
-  ] });
+  ] }) }) });
 }
 
 // src/token-select/network-rail.tsx
@@ -982,99 +732,184 @@ 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-10 shrink-0 items-center justify-center rounded-[12px] border border-solid md:size-[50px]",
+    "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"
   );
 }
 function NetworkRail(props) {
   const {
-    view,
-    chainFilter,
-    chips,
-    fundedBlockchains,
+    role,
     walletConnected,
-    showAllLabel = false,
+    selection,
+    chains,
+    fundedBlockchains,
     lockChainKind = null,
     disabledBlockchains = null,
     disabledReason,
-    onSelectFilter,
-    onOpenNetworks,
+    onSelectWallet,
+    onSelectAll,
+    onSelectNetworks,
+    onSelectChain,
     className
   } = 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 });
   }
-  return /* @__PURE__ */ jsxs3("div", { className: cx("flex h-full w-[52px] shrink-0 flex-col items-center border-r border-[#e3e3e3] pr-2 md:w-[72px] md:pr-3", className), children: [
-    showAllLabel ? /* @__PURE__ */ jsx4(
-      "button",
-      {
-        type: "button",
-        "aria-label": "All",
-        onClick: () => onSelectFilter(ALL_CHAIN_FILTER),
-        className: chipClass(view === "token" && chainFilter === ALL_CHAIN_FILTER, false),
-        children: /* @__PURE__ */ jsx4("span", { className: cx("text-xs font-medium text-black md:text-sm", fontSans), children: "All" })
-      }
-    ) : /* @__PURE__ */ jsx4(
-      "button",
-      {
-        type: "button",
-        "aria-label": "Wallet",
-        disabled: !walletConnected,
-        onClick: () => {
-          if (!walletConnected) return;
-          onSelectFilter(ALL_CHAIN_FILTER);
-        },
-        className: walletConnected ? chipClass(view === "token" && chainFilter === ALL_CHAIN_FILTER, false) : "relative flex size-10 shrink-0 cursor-not-allowed items-center justify-center rounded-[12px] border border-solid border-transparent md:size-[50px]",
-        children: walletConnected ? /* @__PURE__ */ jsx4(IconWallet, { className: "size-4 text-black" }) : /* @__PURE__ */ jsx4("span", { className: "flex size-8 items-center justify-center rounded-[8px] bg-[#EFEFEF]", children: /* @__PURE__ */ jsx4(IconWallet, { className: "size-4 text-[#9FA7BA]" }) })
-      }
-    ),
-    /* @__PURE__ */ jsx4("div", { className: "mt-2 flex min-h-0 w-full flex-1 flex-col items-center gap-2 overflow-y-auto", children: chips.map((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)}; edit the recipient to change chain` : void 0;
-      const selected = view === "token" && chainFilter === chain.blockchain;
-      return /* @__PURE__ */ jsx4("span", { children: wrapDisabled(
-        disabled,
-        reason,
-        /* @__PURE__ */ jsxs3(
-          "button",
-          {
-            type: "button",
-            "aria-label": chain.chainName,
-            disabled,
-            onClick: () => {
-              if (disabled) return;
-              onSelectFilter(chain.blockchain);
-            },
-            className: chipClass(selected, disabled),
-            children: [
-              /* @__PURE__ */ jsx4("img", { src: chain.logo, alt: "", className: "size-6 object-cover md:size-8" }),
-              fundedBlockchains.has(chain.blockchain) ? /* @__PURE__ */ jsx4("span", { className: "absolute top-1 right-1 size-2 rounded-full border border-white bg-[#06f] md:size-2.5" }) : null
-            ]
-          }
-        )
-      ) }, chain.blockchain);
-    }) }),
-    /* @__PURE__ */ jsx4("div", { className: "mt-2 flex w-full shrink-0 justify-center border-t border-[#e3e3e3] pt-2", children: /* @__PURE__ */ jsx4(
-      "button",
-      {
-        type: "button",
-        "aria-label": "All networks",
-        onClick: onOpenNetworks,
-        className: chipClass(view === "network", false),
-        children: /* @__PURE__ */ jsx4(IconAllNetworks, { className: "size-4 text-black" })
-      }
-    ) })
+  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",
+        {
+          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
+          ]
+        }
+      )
+    ) }, 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
   ] });
 }
 
+// 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,
+    {
+      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
+  ) }) });
+}
+
+// src/token-select/prefs.ts
+import { useSyncExternalStore as useSyncExternalStore2 } from "react";
+var EMPTY_PREFS = { recentAssetIds: [], recentBlockchains: [] };
+function rememberRecentAsset(recent, assetId) {
+  const id = assetId.trim();
+  if (!id) return recent;
+  return [id, ...recent.filter((item) => item !== id)].slice(0, MAX_RECENT_ASSETS);
+}
+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 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 };
+}
+function readStorage() {
+  if (typeof localStorage === "undefined") return EMPTY_PREFS;
+  try {
+    const raw = localStorage.getItem(TOKEN_SELECT_PREFS_STORAGE_KEY);
+    if (!raw) return EMPTY_PREFS;
+    const parsed = JSON.parse(raw);
+    const version = typeof parsed.version === "number" ? parsed.version : 0;
+    const payload = parsed && typeof parsed === "object" && "state" in parsed ? parsed.state : parsed;
+    return migrateTokenSelectPrefs(payload, version);
+  } catch {
+    return EMPTY_PREFS;
+  }
+}
+function writeStorage(state) {
+  if (typeof localStorage === "undefined") return;
+  localStorage.setItem(TOKEN_SELECT_PREFS_STORAGE_KEY, JSON.stringify({
+    state,
+    version: TOKEN_SELECT_PREFS_VERSION
+  }));
+}
+var prefs = readStorage();
+var listeners2 = /* @__PURE__ */ new Set();
+function emit2(next) {
+  prefs = next;
+  writeStorage(next);
+  for (const listener of listeners2) listener();
+}
+function subscribe2(listener) {
+  listeners2.add(listener);
+  return () => listeners2.delete(listener);
+}
+function getTokenSelectPrefs() {
+  return prefs;
+}
+function setLastToken(assetId, blockchain) {
+  emit2({
+    recentAssetIds: rememberRecentAsset(prefs.recentAssetIds, assetId),
+    recentBlockchains: rememberRecentBlockchain(prefs.recentBlockchains, blockchain)
+  });
+}
+function setLastBlockchain(blockchain) {
+  emit2({
+    ...prefs,
+    recentBlockchains: rememberRecentBlockchain(prefs.recentBlockchains, blockchain)
+  });
+}
+function useTokenSelectPrefs() {
+  return useSyncExternalStore2(subscribe2, getTokenSelectPrefs, getTokenSelectPrefs);
+}
+
 // src/token-select/token-pane.tsx
-import { SearchInput } from "@stableflow/pay-ui/search-input";
+import { IconChevron as IconChevron2 } from "@stableflow/pay-ui/icons/chevron";
 import { Skeleton } from "@stableflow/pay-ui/skeleton";
-import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function TokenPane(props) {
   const {
     sections,
@@ -1082,65 +917,67 @@ function TokenPane(props) {
     loading,
     showBalances = false,
     showWalletStatus = true,
+    header = null,
     getBalance,
     isBalanceLoading,
     onSelectToken,
     isTokenDisabled,
-    search = "",
-    onSearchChange,
-    showSearch = false,
-    searchClassName,
     rowClassName
   } = props;
   const visibleSections = sections.filter((section) => section.title || section.tokens.length > 0);
   const hasTokens = sections.some((section) => section.tokens.length > 0);
-  return /* @__PURE__ */ jsxs4("div", { className: "flex min-h-0 flex-1 flex-col", children: [
-    showSearch && onSearchChange ? /* @__PURE__ */ jsx5(
-      SearchInput,
+  return /* @__PURE__ */ jsx6("div", { className: "flex h-full min-h-0 flex-1 flex-col", children: /* @__PURE__ */ jsx6("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__ */ jsx6(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__ */ jsx6("p", { className: cx("min-w-0 truncate text-sm font-medium text-[#aaa]", fontSans), children: section.title }),
+        showWalletStatus && section.walletKind ? /* @__PURE__ */ jsx6(ChainWalletStatus, { kind: section.walletKind }) : null
+      ] }) : 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),
+          disabled: Boolean(isTokenDisabled?.(token)),
+          onSelect: () => onSelectToken(token),
+          className: rowClassName
+        },
+        `${section.id}-${token.assetId}`
+      ))
+    ] }, section.id)),
+    loading && !hasTokens ? /* @__PURE__ */ jsx6(TokenListSkeleton, {}) : null,
+    !loading && !hasTokens ? /* @__PURE__ */ jsx6("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",
       {
-        value: search,
-        onChange: onSearchChange,
-        placeholder: "search or paste address",
-        className: "mb-3 shrink-0",
-        inputClassName: cx(
-          "h-[36px] rounded-[18px] border-[#e3e3e3] bg-[#f6f6f6] text-sm placeholder:text-black/30",
-          searchClassName
-        )
+        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__ */ jsx6(IconChevron2, { className: "rotate-180 text-[#aaa]" }),
+          /* @__PURE__ */ jsx6("span", { className: "truncate", children: header.title })
+        ]
       }
-    ) : null,
-    /* @__PURE__ */ jsxs4("div", { className: "flex min-h-0 flex-1 flex-col overflow-y-auto", children: [
-      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-2 md:px-3.5", children: [
-          /* @__PURE__ */ jsx5("p", { className: cx("min-w-0 truncate text-sm font-medium text-[#aaa]", fontSans), children: section.title }),
-          showWalletStatus && section.walletKind ? /* @__PURE__ */ jsx5(ChainWalletStatus, { kind: section.walletKind }) : null
-        ] }) : null,
-        section.tokens.map((token) => /* @__PURE__ */ jsx5(
-          TokenRow,
-          {
-            token,
-            selected: token.assetId === selectedAssetId,
-            recent: token.assetId === section.badgeAssetId,
-            showBalances,
-            formatted: showBalances ? getBalance(token) : null,
-            loadingBalance: showBalances && isBalanceLoading(token),
-            disabled: Boolean(isTokenDisabled?.(token)),
-            onSelect: () => onSelectToken(token),
-            className: rowClassName
-          },
-          `${section.id}-${token.assetId}`
-        ))
-      ] }, section.id)),
-      loading && !hasTokens ? /* @__PURE__ */ jsx5(TokenListSkeleton, {}) : null,
-      !loading && !hasTokens ? /* @__PURE__ */ jsx5("p", { className: cx("px-1 py-4 text-[13px] text-[#606060]", fontSans), children: "No tokens found" }) : null
-    ] })
+    ) : /* @__PURE__ */ jsx6("p", { className: cx("min-w-0 truncate text-sm font-medium text-[#aaa]", fontSans), children: header.title }),
+    showWalletStatus && walletKind ? /* @__PURE__ */ jsx6(ChainWalletStatus, { kind: walletKind }) : null
   ] });
 }
 function TokenListSkeleton() {
-  return /* @__PURE__ */ jsx5("div", { "aria-hidden": true, children: Array.from({ length: 6 }, (_, index) => /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2.5 px-2 py-3 md:px-3.5", children: [
-    /* @__PURE__ */ jsx5(Skeleton, { className: "size-8 shrink-0 rounded-full" }),
+  return /* @__PURE__ */ jsx6("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__ */ jsx6(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__ */ jsx5(Skeleton, { className: "h-3.5 w-24" }),
-      /* @__PURE__ */ jsx5(Skeleton, { className: "h-3 w-16" })
+      /* @__PURE__ */ jsx6(Skeleton, { className: "h-3.5 w-24" }),
+      /* @__PURE__ */ jsx6(Skeleton, { className: "h-3 w-16" })
     ] })
   ] }, index)) });
 }
@@ -1154,16 +991,16 @@ function TokenRow(props) {
       disabled,
       onClick: onSelect,
       className: cx(
-        "flex w-full items-center justify-between gap-2 rounded-[12px] border-0 bg-transparent px-2 py-3 text-left hover:bg-[#F6F6F6] md:px-3.5",
-        selected && "bg-[#F6F6F6]",
+        "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]",
+        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__ */ jsx5("img", { src: token.logo, alt: "", className: "size-8 rounded-full object-cover" }),
-            /* @__PURE__ */ jsx5(
+            /* @__PURE__ */ jsx6("img", { src: token.logo, alt: "", className: "size-8 rounded-[12px] object-cover" }),
+            /* @__PURE__ */ jsx6(
               "img",
               {
                 src: token.chain.logo,
@@ -1174,37 +1011,78 @@ 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__ */ jsx5("span", { className: cx("truncate text-sm font-semibold text-black", fontSans), children: token.symbol }),
-              recent ? /* @__PURE__ */ jsx5("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__ */ jsx6("span", { className: cx("truncate text-sm font-semibold text-black", fontSans), children: token.symbol }),
+              recent ? /* @__PURE__ */ jsx6("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__ */ jsx5("span", { className: cx("mt-0.5 block truncate text-xs text-[#606060]", fontSans), children: token.chain.chainName })
+            /* @__PURE__ */ jsx6("span", { className: cx("mt-0.5 block truncate text-xs text-[#606060]", fontSans), children: token.chain.chainName })
           ] })
         ] }),
-        showBalances ? /* @__PURE__ */ jsx5("span", { className: "shrink-0 text-right", children: loadingBalance ? /* @__PURE__ */ jsx5(
+        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__ */ jsx5("span", { className: cx("block text-sm font-medium text-black", fontSans), children: formatDisplayAmount(formatted, { prefix: "", maxDecimals: 4 }) }),
-          usd >= 0 ? /* @__PURE__ */ jsx5("span", { className: cx("block text-xs text-[#606060]", fontSans), children: formatDisplayAmount(usd, { prefix: "$", showDust: true }) }) : null
-        ] }) : /* @__PURE__ */ jsx5("span", { className: cx("text-sm text-[#606060]", fontSans), children: "\u2014" }) }) : null
+          /* @__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 jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function SearchResults(props) {
+  const {
+    groups,
+    selectedAssetId,
+    loading,
+    showBalances = false,
+    showWalletStatus = true,
+    getBalance,
+    isBalanceLoading,
+    onSelectToken,
+    isTokenDisabled,
+    rowClassName
+  } = props;
+  const hasTokens = groups.some((group) => group.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__ */ 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__ */ jsx7("p", { className: cx("min-w-0 truncate text-sm font-medium text-[#aaa]", fontSans), children: group.chainName }),
+        showWalletStatus ? /* @__PURE__ */ jsx7(ChainWalletStatus, { kind: group.chainKind }) : null
+      ] }),
+      group.tokens.map((token) => /* @__PURE__ */ jsx7(
+        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__ */ jsx7("p", { className: cx("px-3.5 py-4 text-[13px] text-[#606060]", fontSans), children: "No tokens found" }) : null
+  ] }) }) });
+}
+
+// src/token-select/types.ts
+var KNOWN_CHAIN_KINDS = ["evm", "near", "solana", "tron", "zec"];
+function ownerKey2(owners) {
+  return Object.keys(owners).sort().map((kind) => `${kind}:${owners[kind] ?? ""}`).join("|");
+}
+
 // src/token-select/TokenSelectDialog.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx8, 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";
-function chainsFromTokens(tokens) {
-  const byCode = /* @__PURE__ */ new Map();
-  for (const token of tokens) {
-    if (!byCode.has(token.blockchain)) byCode.set(token.blockchain, token.chain);
-  }
-  return Array.from(byCode.values());
-}
 function ownerForToken(owners, token) {
   return owners[token.chain.chainKind] ?? null;
 }
@@ -1215,6 +1093,15 @@ 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,
@@ -1231,6 +1118,7 @@ function TokenSelectDialog(props) {
     disabledReason,
     className,
     titleClassName,
+    headerClassName,
     closeClassName,
     contentClassName,
     searchClassName,
@@ -1239,11 +1127,19 @@ function TokenSelectDialog(props) {
   } = props;
   const payer = role === "payer";
   const showBalances = payer;
-  const { wallet, popularTokens: popularRefs } = usePayWidgets();
-  const { tokens, status } = usePayConfigSnapshot();
+  const {
+    wallet,
+    popularTokens: popularRefs,
+    tokens,
+    loading,
+    stableSymbols,
+    balanceMode,
+    getBalance: syncGetBalance,
+    isBalanceLoading: syncIsBalanceLoading
+  } = usePayWidgets();
   const prefs2 = useTokenSelectPrefs();
-  const balanceEntries = useSyncExternalStore4(subscribePayTokenBalances, getPayTokenBalances, getPayTokenBalances);
-  const connectedOwners = useMemo2(() => {
+  const balanceEntries = useSyncExternalStore3(subscribePayTokenBalances, getPayTokenBalances, getPayTokenBalances);
+  const connectedOwners = useMemo(() => {
     const owners2 = {};
     for (const [kind, account] of Object.entries(wallet.accounts)) {
       const address = account?.address?.trim();
@@ -1251,53 +1147,57 @@ function TokenSelectDialog(props) {
     }
     return owners2;
   }, [wallet.accounts]);
-  const owners = showBalances ? { ...connectedOwners, ...balanceOwners } : {};
+  const owners = useMemo(
+    () => showBalances ? { ...connectedOwners, ...balanceOwners } : {},
+    [showBalances, connectedOwners, balanceOwners]
+  );
   const walletConnected = hasAnyOwner(connectedOwners);
-  const walletWasConnected = useRef(null);
-  const [search, setSearch] = useState2("");
-  const [chainFilter, setChainFilter] = useState2(ALL_CHAIN_FILTER);
-  const [view, setView] = useState2("token");
-  const loading = status === "loading" || status === "idle";
-  useEffect3(() => {
+  const [search, setSearch] = useState("");
+  const [view, setView] = useState(payer ? { kind: "networks" } : { kind: "all" });
+  const [slideDirection, setSlideDirection] = useState(1);
+  const networksScrollRef = useRef(null);
+  const savedNetworksScroll = useRef(0);
+  const walletConnectedRef = useRef(walletConnected);
+  const payerRef = useRef(payer);
+  const lockRef = useRef(lockChainKind);
+  const tokensRef = useRef(tokens);
+  walletConnectedRef.current = walletConnected;
+  payerRef.current = payer;
+  lockRef.current = lockChainKind;
+  tokensRef.current = tokens;
+  useEffect2(() => {
     if (!open) return;
     setSearch("");
-    if (lockChainKind) {
-      setView("token");
-      return;
-    }
-    if (!payer) {
-      setView("token");
-      setChainFilter(ALL_CHAIN_FILTER);
-    }
-  }, [open, lockChainKind, payer]);
-  useEffect3(() => {
-    if (!open || !lockChainKind || tokens.length === 0) return;
-    setChainFilter(initialChainFilter(
-      lockChainKind,
-      getTokenSelectPrefs().recentBlockchains,
-      chainsFromTokens(tokens)
-    ));
-  }, [open, lockChainKind, tokens]);
-  useEffect3(() => {
-    if (!open) {
-      walletWasConnected.current = null;
+    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 (lockChainKind || !payer) {
-      walletWasConnected.current = walletConnected;
+    if (!payerRef.current) {
+      setView({ kind: "all" });
       return;
     }
-    const previous = walletWasConnected.current;
-    walletWasConnected.current = walletConnected;
-    if (previous !== null && previous === walletConnected) return;
-    setView(walletConnected ? "token" : "network");
-    setChainFilter(ALL_CHAIN_FILTER);
-  }, [open, lockChainKind, payer, walletConnected]);
-  const allowed = useMemo2(() => {
+    setView(walletConnectedRef.current ? { kind: "wallet" } : { kind: "networks" });
+  }, [open]);
+  useEffect2(() => {
+    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 });
+  }, [open, lockChainKind, tokens]);
+  const allowed = useMemo(() => {
     if (!allowedBlockchains || allowedBlockchains.length === 0) return null;
     return new Set(allowedBlockchains.map((code) => code.toLowerCase()));
   }, [allowedBlockchains]);
-  const scopedTokens = useMemo2(() => {
+  const scopedTokens = useMemo(() => {
     return tokens.filter((token) => {
       if (allowed && !allowed.has(token.blockchain.toLowerCase())) return false;
       if (excludeNative && isNativeToken(token)) return false;
@@ -1306,22 +1206,25 @@ function TokenSelectDialog(props) {
       return true;
     });
   }, [tokens, allowed, excludeNative, payer]);
-  const ownerKey2 = ["evm", "near", "solana", "tron", "zec"].map((kind) => `${kind}:${owners[kind] ?? ""}`).join("|");
-  const tokenKey = useMemo2(() => scopedTokens.map((token) => token.assetId).join("|"), [scopedTokens]);
+  const ownersKey = ownerKey2(owners);
+  const tokenKey = useMemo(() => scopedTokens.map((token) => token.assetId).join("|"), [scopedTokens]);
   const ownersRef = useRef(owners);
-  const tokensRef = useRef(scopedTokens);
+  const scopedRef = useRef(scopedTokens);
   ownersRef.current = owners;
-  tokensRef.current = scopedTokens;
-  useEffect3(() => {
-    if (!showBalances || !open || !hasAnyOwner(ownersRef.current) || !tokenKey) return;
-    void ensurePayTokenBalances(ownersRef.current, tokensRef.current);
+  scopedRef.current = scopedTokens;
+  useEffect2(() => {
+    if (balanceMode !== "async" || !showBalances || !open || !hasAnyOwner(ownersRef.current) || !tokenKey) return;
+    void ensurePayTokenBalances(ownersRef.current, scopedRef.current);
     const id = window.setInterval(() => {
-      void ensurePayTokenBalances(ownersRef.current, tokensRef.current, { force: true });
+      void ensurePayTokenBalances(ownersRef.current, scopedRef.current, { force: true });
     }, TOKEN_BALANCE_POLL_MS);
     return () => window.clearInterval(id);
-  }, [showBalances, open, ownerKey2, tokenKey]);
+  }, [balanceMode, showBalances, open, ownersKey, tokenKey]);
   function balanceOf(token) {
-    return getPayTokenBalance(ownerForToken(owners, token), token.assetId)?.formatted;
+    const owner = ownerForToken(owners, token);
+    if (!showBalances || !owner) return void 0;
+    if (balanceMode === "sync" && syncGetBalance) return syncGetBalance(token, owner) ?? void 0;
+    return getPayTokenBalance(owner, token.assetId)?.formatted;
   }
   function usdOf(token) {
     if (!showBalances) return -1;
@@ -1331,52 +1234,48 @@ function TokenSelectDialog(props) {
     if (!showBalances) return false;
     const owner = ownerForToken(owners, token);
     if (!owner) return false;
+    if (balanceMode === "sync") return syncIsBalanceLoading?.(token, owner) ?? false;
     const entry = getPayTokenBalance(owner, token.assetId);
     return entry?.formatted == null && (!entry || entry.status === "loading");
   }
-  const availableChains = useMemo2(() => {
-    const codes = new Set(scopedTokens.map((token) => token.blockchain));
-    const byCode = /* @__PURE__ */ new Map();
-    for (const token of scopedTokens) {
-      if (codes.has(token.blockchain) && !byCode.has(token.blockchain)) byCode.set(token.blockchain, token.chain);
-    }
-    return Array.from(byCode.values());
-  }, [scopedTokens]);
-  const sortedChains = useMemo2(
-    () => sortChainsForSidebar(availableChains, scopedTokens, {
-      showBalances,
-      walletConnected,
-      getBalanceUsd: (token) => tokenBalanceUsd(token, getPayTokenBalance(ownerForToken(owners, token), token.assetId)?.formatted)
-    }),
-    [availableChains, scopedTokens, showBalances, walletConnected, owners, balanceEntries]
-  );
-  const fundedBlockchains = useMemo2(() => {
+  const availableChains = useMemo(() => chainsFromTokens(scopedTokens), [scopedTokens]);
+  const fundedBlockchains = useMemo(() => {
     const funded = /* @__PURE__ */ new Set();
     if (!showBalances) return funded;
     for (const chain of availableChains) {
-      if (chainHasBalance(chain.blockchain, scopedTokens, (token) => getPayTokenBalance(ownerForToken(owners, token), token.assetId)?.formatted)) {
+      if (chainHasBalance(chain.blockchain, scopedTokens, (token) => balanceOf(token))) {
         funded.add(chain.blockchain);
       }
     }
     return funded;
-  }, [availableChains, owners, scopedTokens, showBalances, balanceEntries]);
-  const popularTokens = useMemo2(
+  }, [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]);
+  useEffect2(() => {
+    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 searchingAll = chainFilter === ALL_CHAIN_FILTER && search.trim().length > 0;
-  const walletKind = chainFilter === ALL_CHAIN_FILTER ? null : availableChains.find((chain) => chain.blockchain === chainFilter)?.chainKind ?? null;
-  const sections = useMemo2(() => {
-    if (showBalances && chainFilter === ALL_CHAIN_FILTER && searchingAll) {
-      const matched2 = scopedTokens.filter((token) => tokenMatchesSearch(token, search));
-      return [{
-        id: "search",
-        tokens: sortTokensByBalance(matched2, usdOf, loadingOf),
-        badgeAssetId: newestAssetId
-      }];
-    }
-    if (showBalances && chainFilter === ALL_CHAIN_FILTER) {
+  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) {
@@ -1396,42 +1295,87 @@ function TokenSelectDialog(props) {
       }
       return next;
     }
-    const matched = scopedTokens.filter((token) => matchesChainFilter(token, chainFilter) && tokenMatchesSearch(token, search));
-    if (!showBalances && chainFilter === ALL_CHAIN_FILTER && !search.trim()) {
+    if (view.kind === "all") {
       const next = [];
       if (popularTokens.length > 0) {
         next.push({ id: "popular", title: POPULAR_SECTION_TITLE, tokens: popularTokens });
       }
-      next.push({ id: "all", tokens: sortTokensBySymbol(matched) });
+      const sorted = scopedTokens.slice().sort((left, right) => compareTokensByPriority(left, right, stableSymbols));
+      next.push({ id: "all", tokens: sorted });
       return next;
     }
-    const chainName = availableChains.find((chain) => chain.blockchain === chainFilter)?.chainName ?? chainFilter;
-    return [{
-      id: chainFilter,
-      title: chainName,
-      walletKind,
-      tokens: showBalances ? sortTokensByBalance(matched, usdOf, loadingOf) : sortTokensBySymbol(matched),
-      badgeAssetId: showBalances ? newestAssetId : null
-    }];
+    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 chain = chainByCode(availableChains, view.blockchain);
+      return [{
+        id: view.blockchain,
+        tokens: sortTokensForChain(matched, {
+          withBalances: Boolean(chain && owners[chain.chainKind]),
+          usdOf,
+          loadingOf,
+          stableSymbols
+        }),
+        badgeAssetId: newestAssetId
+      }];
+    }
+    return [];
   }, [
-    showBalances,
-    chainFilter,
-    searchingAll,
-    search,
+    view,
+    payer,
     scopedTokens,
     prefs2.recentAssetIds,
     newestAssetId,
-    walletKind,
     balanceEntries,
     owners,
     popularTokens,
-    availableChains
+    availableChains,
+    stableSymbols,
+    balanceMode,
+    syncGetBalance,
+    syncIsBalanceLoading
   ]);
-  function handleSelectFilter(filter) {
-    setChainFilter(filter);
-    if (filter !== ALL_CHAIN_FILTER) setLastBlockchain(filter);
-    setView("token");
+  const searchGroups = useMemo(() => {
+    if (!searching) return [];
+    return groupSearchResults(scopedTokens, search, {
+      role: payer ? "payer" : "receiver",
+      usdOf,
+      loadingOf,
+      hasOwner: (kind) => Boolean(owners[kind]),
+      stableSymbols
+    });
+  }, [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) {
     if (isBlockchainDisabled(token.blockchain, disabledBlockchains)) return;
     if (isChainKindLocked(token.chain.chainKind, lockChainKind)) return;
@@ -1440,8 +1384,28 @@ function TokenSelectDialog(props) {
     onSelect({ token });
     onClose();
   }
-  const awaitingBalances = showBalances && chainFilter === ALL_CHAIN_FILTER && !searchingAll && scopedTokens.some((token) => loadingOf(token));
-  return /* @__PURE__ */ jsx6(
+  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));
+  const tokenDisabled = (token) => isBlockchainDisabled(token.blockchain, disabledBlockchains) || isChainKindLocked(token.chain.chainKind, lockChainKind);
+  const sliding = view.kind === "networks" || view.kind === "network-chain";
+  const tokenPane = /* @__PURE__ */ jsx8(
+    TokenPane,
+    {
+      sections,
+      header: chainHeader,
+      selectedAssetId,
+      loading: loading || awaitingBalances,
+      showBalances,
+      showWalletStatus: payer,
+      getBalance: balanceOf,
+      isBalanceLoading: loadingOf,
+      onSelectToken: handleSelectToken,
+      isTokenDisabled: tokenDisabled,
+      rowClassName
+    }
+  );
+  return /* @__PURE__ */ jsx8(
     Dialog,
     {
       open,
@@ -1452,10 +1416,11 @@ function TokenSelectDialog(props) {
         fontSans,
         titleClassName
       ),
-      closeClassName: cx(view === "token" ? "ml-0" : void 0, closeClassName),
-      contentClassName,
-      headerAction: view === "token" ? /* @__PURE__ */ jsx6(
-        SearchInput2,
+      headerClassName: cx("h-14 border-b border-[#e3e3e3] px-[22px] pr-4", headerClassName),
+      closeClassName: cx("md:ml-0", closeClassName),
+      contentClassName: cx("overflow-hidden", contentClassName),
+      headerAction: /* @__PURE__ */ jsx8(
+        SearchInput,
         {
           value: search,
           onChange: setSearch,
@@ -1463,80 +1428,261 @@ function TokenSelectDialog(props) {
           className: "ml-auto hidden w-[215px] shrink-0 md:block",
           inputClassName: cx(SEARCH_INPUT_CLASS, searchClassName)
         }
-      ) : null,
-      cardClassName: cx("w-full max-h-[90vh] md:w-[474px]", className),
-      children: /* @__PURE__ */ jsxs5("div", { className: "flex h-[min(520px,62vh)] min-h-0 flex-col overflow-hidden md:h-[min(555px,70vh)]", children: [
-        view === "token" ? /* @__PURE__ */ jsx6(
-          SearchInput2,
+      ),
+      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",
+        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__ */ jsx8(
+          SearchInput,
           {
             value: search,
             onChange: setSearch,
             placeholder: "search or paste address",
-            className: "mb-3 shrink-0 md:hidden",
+            className: "mb-3 shrink-0 px-[22px] md:hidden",
             inputClassName: cx(SEARCH_INPUT_CLASS, searchClassName)
           }
-        ) : null,
-        /* @__PURE__ */ jsxs5("div", { className: "flex min-h-0 flex-1", children: [
-          /* @__PURE__ */ jsx6(
+        ),
+        /* @__PURE__ */ jsxs6("div", { className: "flex min-h-0 flex-1", children: [
+          /* @__PURE__ */ jsx8(
             NetworkRail,
             {
-              view,
-              chainFilter,
-              chips: sortedChains,
-              fundedBlockchains,
+              role: payer ? "payer" : "receiver",
               walletConnected,
-              showAllLabel: !payer,
+              selection: railSelection(view),
+              chains: railChains,
+              fundedBlockchains,
               lockChainKind,
               disabledBlockchains,
               disabledReason,
-              onSelectFilter: handleSelectFilter,
-              onOpenNetworks: () => setView("network"),
+              onSelectWallet: () => setView({ kind: "wallet" }),
+              onSelectAll: () => setView({ kind: "all" }),
+              onSelectNetworks: () => setView({ kind: "networks" }),
+              onSelectChain: (blockchain) => handleSelectChain(blockchain, false),
               className: railClassName
             }
           ),
-          view === "network" ? /* @__PURE__ */ jsx6("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col pl-3 md:pl-4", children: /* @__PURE__ */ jsx6(
-            ChainPane,
-            {
-              chains: sortedChains,
-              fundedBlockchains,
-              showWalletStatus: payer,
-              onSelectFilter: handleSelectFilter,
-              lockChainKind,
-              disabledBlockchains,
-              disabledReason
-            }
-          ) }) : /* @__PURE__ */ jsx6("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col pl-3 md:pl-4", children: /* @__PURE__ */ jsx6(
-            TokenPane,
+          searching ? /* @__PURE__ */ jsx8(
+            SearchResults,
             {
-              sections,
+              groups: searchGroups,
               selectedAssetId,
-              loading: loading || awaitingBalances,
+              loading,
               showBalances,
               showWalletStatus: payer,
               getBalance: balanceOf,
               isBalanceLoading: loadingOf,
               onSelectToken: handleSelectToken,
-              isTokenDisabled: (token) => isBlockchainDisabled(token.blockchain, disabledBlockchains) || isChainKindLocked(token.chain.chainKind, lockChainKind),
-              searchClassName,
+              isTokenDisabled: tokenDisabled,
               rowClassName
             }
-          ) })
+          ) : sliding ? /* @__PURE__ */ jsx8(
+            PaneTransition,
+            {
+              paneKey: view.kind === "network-chain" ? `network-chain:${view.blockchain}` : "networks",
+              direction: slideDirection,
+              children: view.kind === "networks" ? /* @__PURE__ */ jsx8(
+                ChainPane,
+                {
+                  chains: networkChains,
+                  showWalletStatus: payer,
+                  onSelectChain: (blockchain) => handleSelectChain(blockchain, true),
+                  lockChainKind,
+                  disabledBlockchains,
+                  disabledReason,
+                  scrollRef: networksScrollRef
+                }
+              ) : tokenPane
+            }
+          ) : /* @__PURE__ */ jsx8("div", { className: "relative min-h-0 flex-1", children: tokenPane })
         ] })
       ] })
     }
   );
 }
+
+// src/token-select/logos.ts
+var LOGO_HOST = "https://assets.dapdap.net";
+var CHAIN_LOGO_ALIAS = {
+  eth: "ethereum",
+  ethereum: "ethereum",
+  base: "base",
+  arb: "arbitrum",
+  arbitrum: "arbitrum",
+  op: "optimism",
+  optimism: "optimism",
+  pol: "polygon",
+  polygon: "polygon",
+  bsc: "bsc",
+  avax: "avalanche",
+  avalanche: "avalanche",
+  gnosis: "gnosis",
+  scroll: "scroll",
+  xlayer: "xlayer",
+  bera: "berachain",
+  berachain: "berachain",
+  near: "near",
+  sol: "solana",
+  solana: "solana",
+  tron: "tron",
+  zec: "zcash",
+  zcash: "zcash"
+};
+function logoPath(path) {
+  const normalized = path.startsWith("/") ? path : `/${path}`;
+  return `${LOGO_HOST}${normalized}`;
+}
+function chainLogoUrl(blockchainOrNetwork) {
+  const key = String(blockchainOrNetwork || "").toLowerCase();
+  const file = CHAIN_LOGO_ALIAS[key] || key.replace(/\s+/g, "");
+  return logoPath(`/stableflow/networks/${file}.png`);
+}
+function tokenLogoUrl(symbol) {
+  const upper = String(symbol || "").toUpperCase();
+  const file = upper === "USDT0" ? "usdt" : upper.toLowerCase();
+  return logoPath(`/stableflow/tokens/${file}.png`);
+}
+
+// src/token-select/pay-config.ts
+var ZERO_ADDRESS2 = "0x0000000000000000000000000000000000000000";
+var WRAP_NEAR_CONTRACT = "wrap.near";
+function asRecord(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return null;
+  return value;
+}
+function apiText(value) {
+  if (typeof value === "string") return value.trim();
+  if (typeof value === "number" && Number.isFinite(value)) return String(value);
+  return "";
+}
+function apiNumber(value) {
+  if (typeof value === "number" && Number.isFinite(value)) return value;
+  if (typeof value === "string" && value.trim()) {
+    const parsed = Number(value);
+    if (Number.isFinite(parsed)) return parsed;
+  }
+  return null;
+}
+function asBoolean(value, fallback = true) {
+  if (typeof value === "boolean") return value;
+  if (typeof value === "string") {
+    const lower = value.trim().toLowerCase();
+    if (lower === "true") return true;
+    if (lower === "false") return false;
+  }
+  return fallback;
+}
+function mapSourceChain(raw) {
+  const row = asRecord(raw) ?? {};
+  return {
+    network: apiText(row.network),
+    chainId: apiText(row.chain_id ?? row.chainId),
+    chainName: apiText(row.chain_name ?? row.chainName),
+    logo: apiText(row.logo),
+    explorer: apiText(row.explorer)
+  };
+}
+function mapSourceToken(raw) {
+  const row = asRecord(raw) ?? {};
+  return {
+    symbol: apiText(row.symbol),
+    network: apiText(row.network),
+    decimals: apiNumber(row.decimals) ?? 0,
+    contractAddress: apiText(row.contract_address ?? row.contractAddress),
+    price: apiText(row.price),
+    supportPayment: asBoolean(row.support_payment ?? row.supportPayment),
+    supportReceive: asBoolean(row.support_receive ?? row.supportReceive)
+  };
+}
+function configBody(raw) {
+  const row = asRecord(raw) ?? {};
+  const data = asRecord(row.data);
+  if (typeof row.code === "number" && data) return data;
+  return row;
+}
+function mapPayConfigSource(raw) {
+  const row = configBody(raw);
+  const chains = Array.isArray(row.chains) ? row.chains.map(mapSourceChain) : [];
+  const tokens = Array.isArray(row.tokens) ? row.tokens.map(mapSourceToken) : [];
+  return { chains, tokens };
+}
+function chainKindFor(network, overrides = {}) {
+  const key = network.trim().toLowerCase();
+  if (!key) return null;
+  return overrides[key] ?? DEFAULT_CHAIN_KINDS[key] ?? null;
+}
+function normalizeSymbol(symbol) {
+  const upper = symbol.trim().toUpperCase();
+  if (!upper) return null;
+  if (upper === "USDT0") return "USDT";
+  if (upper === "WNEAR") return "NEAR";
+  return upper;
+}
+function tokenAssetId(network, symbol, contractAddress) {
+  const addr = String(contractAddress || "").trim();
+  return `${network}:${symbol}:${addr || "native"}`;
+}
+function isNativeAddress(contractAddress) {
+  const addr = String(contractAddress || "").trim();
+  if (!addr) return true;
+  const lower = addr.toLowerCase();
+  return lower === "native" || lower === ZERO_ADDRESS2;
+}
+function normalizePayConfig(source, options) {
+  const overrides = options?.chainKinds ?? {};
+  const chains = [];
+  for (const chain of source.chains) {
+    const chainKind = chainKindFor(chain.network, overrides);
+    if (!chainKind || !chain.network) continue;
+    chains.push({
+      blockchain: chain.network,
+      chainName: chain.chainName || chain.network,
+      chainKind,
+      chainId: chain.chainId || void 0,
+      logo: chain.logo || chainLogoUrl(chain.network),
+      explorer: chain.explorer
+    });
+  }
+  const chainByCode2 = new Map(chains.map((chain) => [chain.blockchain, chain]));
+  const tokens = [];
+  for (const token of source.tokens) {
+    const chain = chainByCode2.get(token.network);
+    if (!chain) continue;
+    const symbol = normalizeSymbol(token.symbol);
+    if (!symbol) continue;
+    if (!Number.isInteger(token.decimals) || token.decimals < 0) continue;
+    const contractAddress = token.contractAddress.trim() || null;
+    tokens.push({
+      assetId: tokenAssetId(token.network, symbol, contractAddress),
+      symbol,
+      providerSymbol: token.symbol,
+      blockchain: token.network,
+      decimals: token.decimals,
+      contractAddress,
+      price: Number(token.price || 1),
+      logo: tokenLogoUrl(symbol),
+      supportPayment: token.supportPayment,
+      supportReceive: token.supportReceive,
+      chain
+    });
+  }
+  const hasNearWrap = tokens.some((token) => token.symbol === "NEAR" && token.blockchain === "near" && token.contractAddress?.toLowerCase() === WRAP_NEAR_CONTRACT);
+  if (!hasNearWrap) return tokens;
+  return tokens.filter((token) => !(token.symbol === "NEAR" && token.blockchain === "near" && isNativeAddress(token.contractAddress)));
+}
 export {
-  DEFAULT_API_HOST,
+  KNOWN_CHAIN_KINDS,
   PayWidgetsProvider,
   TokenSelectDialog,
+  chainsFromTokens,
   clearPayTokenBalances,
   mapPayConfigSource,
   normalizePayConfig,
+  ownerKey2 as ownerKey,
   parsePopularTokens,
   refreshPayTokenBalance,
-  usePayConfig,
-  usePayConfigSnapshot,
+  tokenAssetId,
   usePayTokenBalance
 };
 //# sourceMappingURL=index.js.map