@stableflow/pay-widgets 0.0.1-beta-82ede460a5-20260923

package/dist/token-select/index.js

@@ -0,0 +1,1467 @@
+// src/token-select/context.tsx
+import { createContext, useContext, useEffect as useEffect2, useMemo } 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 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 DEFAULT_CHAIN_KINDS = {
+  eth: "evm",
+  base: "evm",
+  arb: "evm",
+  op: "evm",
+  pol: "evm",
+  bsc: "evm",
+  avax: "evm",
+  gnosis: "evm",
+  scroll: "evm",
+  xlayer: "evm",
+  bera: "evm",
+  near: "near",
+  sol: "solana",
+  tron: "tron",
+  zec: "zec"
+};
+
+// src/token-select/balances.ts
+var listeners = /* @__PURE__ */ new Set();
+var balances = {};
+var reader = null;
+var chainInflight = /* @__PURE__ */ new Map();
+function emit() {
+  balances = { ...balances };
+  for (const listener of listeners) listener();
+}
+function subscribe(listener) {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+function subscribePayTokenBalances(listener) {
+  return subscribe(listener);
+}
+function getPayTokenBalances() {
+  return balances;
+}
+function ownerKey(owner, chainKind) {
+  return chainKind === "solana" || chainKind === "zec" ? owner : owner.toLowerCase();
+}
+function balanceKey(owner, assetId, chainKind) {
+  return `${ownerKey(owner, chainKind)}:${assetId}`;
+}
+function isFresh(entry, now) {
+  return Boolean(
+    entry && entry.status === "success" && entry.updatedAt != null && now - entry.updatedAt < TOKEN_BALANCE_POLL_MS
+  );
+}
+function loadingEntry(prev) {
+  if (!prev) return { raw: null, formatted: null, status: "loading", error: null, updatedAt: null };
+  return { ...prev, status: "loading", error: null };
+}
+function withStaleOnError(prev, next) {
+  if (next.status !== "error") return 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 getPayTokenBalance(owner, assetId) {
+  if (!owner || !assetId) return void 0;
+  return balances[`${owner}:${assetId}`] ?? balances[`${owner.toLowerCase()}:${assetId}`];
+}
+function usePayTokenBalance(owner, assetId) {
+  const current = useSyncExternalStore(subscribe, getPayTokenBalances, getPayTokenBalances);
+  if (!owner || !assetId) return void 0;
+  return current[`${owner}:${assetId}`] ?? current[`${owner.toLowerCase()}:${assetId}`];
+}
+function writeResult(owner, token, result) {
+  const key = balanceKey(owner, token.assetId, token.chain.chainKind);
+  const prev = balances[key];
+  const next = "error" in result ? { raw: null, formatted: null, status: "error", error: result.error, updatedAt: Date.now() } : { raw: result.raw ?? null, formatted: result.formatted, status: "success", error: null, updatedAt: Date.now() };
+  balances[key] = withStaleOnError(prev, next);
+}
+async function refreshPayTokenBalance(owner, token) {
+  const key = balanceKey(owner, token.assetId, token.chain.chainKind);
+  balances[key] = loadingEntry(balances[key]);
+  emit();
+  if (!reader) {
+    balances[key] = withStaleOnError(balances[key], {
+      raw: null,
+      formatted: null,
+      status: "error",
+      error: "Balance reader is not configured",
+      updatedAt: Date.now()
+    });
+    emit();
+    return balances[key] ?? null;
+  }
+  try {
+    const results = await reader({
+      owner,
+      chainKind: token.chain.chainKind,
+      blockchain: token.blockchain,
+      tokens: [token]
+    });
+    const result = results.find((item) => item.assetId === token.assetId) ?? {
+      assetId: token.assetId,
+      error: "Balance reader returned no result"
+    };
+    writeResult(owner, token, result);
+  } catch (cause) {
+    writeResult(owner, token, {
+      assetId: token.assetId,
+      error: cause instanceof Error ? cause.message : "Failed to read balance"
+    });
+  }
+  emit();
+  return balances[key] ?? null;
+}
+function groupByChain(tokens) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const token of tokens) {
+    const list = groups.get(token.blockchain) ?? [];
+    list.push(token);
+    groups.set(token.blockchain, list);
+  }
+  return groups;
+}
+async function fetchChain(owner, tokens, force) {
+  const blockchain = tokens[0]?.blockchain;
+  const kind = tokens[0]?.chain.chainKind;
+  if (!blockchain || !kind) return;
+  const now = Date.now();
+  const stale = tokens.filter((token) => force || !isFresh(balances[balanceKey(owner, token.assetId, kind)], now));
+  if (stale.length === 0) return;
+  const flightKey = `${ownerKey(owner, kind)}:${blockchain}`;
+  const pending = chainInflight.get(flightKey);
+  if (pending) return pending;
+  for (const token of stale) {
+    const key = balanceKey(owner, token.assetId, kind);
+    balances[key] = loadingEntry(balances[key]);
+  }
+  emit();
+  const run = (async () => {
+    if (!reader) {
+      for (const token of stale) {
+        writeResult(owner, token, { assetId: token.assetId, error: "Balance reader is not configured" });
+      }
+      emit();
+      return;
+    }
+    try {
+      const results = await reader({ owner, chainKind: kind, blockchain, tokens: stale });
+      const byId = new Map(results.map((item) => [item.assetId, item]));
+      for (const token of stale) {
+        writeResult(owner, token, byId.get(token.assetId) ?? {
+          assetId: token.assetId,
+          error: "Balance reader returned no result"
+        });
+      }
+    } catch (cause) {
+      const message = cause instanceof Error ? cause.message : "Failed to read balance";
+      for (const token of stale) writeResult(owner, token, { assetId: token.assetId, error: message });
+    }
+    emit();
+  })();
+  chainInflight.set(flightKey, run);
+  return run.finally(() => {
+    if (chainInflight.get(flightKey) === run) chainInflight.delete(flightKey);
+  });
+}
+async function ensurePayTokenBalances(owners, tokens, opts) {
+  const force = Boolean(opts?.force);
+  const groups = groupByChain(tokens);
+  await Promise.all(Array.from(groups.values()).map((group) => {
+    const kind = group[0]?.chain.chainKind;
+    const owner = kind ? owners[kind] : void 0;
+    if (!owner) return Promise.resolve();
+    return fetchChain(owner, group, force);
+  }));
+}
+
+// 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 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 PayWidgetsProvider(props) {
+  const {
+    apiHost,
+    popularTokens = [],
+    wallet,
+    readBalances,
+    onConfig,
+    onCopyAddress,
+    chainKinds,
+    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]);
+  const connected = Object.values(wallet.accounts).some((account) => Boolean(account?.address?.trim()));
+  useEffect2(() => {
+    if (!connected) clearPayTokenBalances();
+  }, [connected]);
+  const value = useMemo(
+    () => ({ wallet, popularTokens, onCopyAddress }),
+    [wallet, popularTokens, onCopyAddress]
+  );
+  return /* @__PURE__ */ jsx(PayWidgetsContext.Provider, { value, children });
+}
+function usePayWidgets() {
+  const value = useContext(PayWidgetsContext);
+  if (!value) {
+    throw new Error("Token select must be rendered inside PayWidgetsProvider");
+  }
+  return value;
+}
+
+// src/token-select/TokenSelectDialog.tsx
+import { useEffect as useEffect3, useMemo as useMemo2, useRef, useState, useSyncExternalStore as useSyncExternalStore4 } from "react";
+import { Dialog } from "@stableflow/pay-ui/dialog";
+import { SearchInput as SearchInput2 } 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/format.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+var fontSans = "[font-family:Montserrat,PingFang_SC,system-ui,sans-serif]";
+function cx(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function formatAddress(address, prefix = 4, suffix = 5) {
+  if (!address) return "";
+  if (!address.startsWith("0x") && address.length <= 32) return address;
+  if (address.length <= prefix + suffix) return address;
+  return `${address.slice(0, prefix)}...${address.slice(-suffix)}`;
+}
+function chainKindLabel(kind) {
+  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 formatDisplayAmount(value, options = {}) {
+  const maxDecimals = options.maxDecimals ?? 2;
+  const prefix = options.prefix ?? "";
+  const text = String(value).trim();
+  const negative = text.startsWith("-");
+  const unsigned = negative ? text.slice(1) : text;
+  if (!/^\d+(\.\d+)?$/.test(unsigned)) return `${prefix}0`;
+  const numeric = Number(unsigned);
+  const minUnit = 10 ** -maxDecimals;
+  if (options.showDust && numeric > 0 && numeric < minUnit) {
+    const dust = `<${minUnit.toFixed(maxDecimals)}`;
+    return prefix ? `${prefix} ${dust}` : dust;
+  }
+  const [intPart, fracPart = ""] = unsigned.split(".");
+  const fraction = fracPart.slice(0, maxDecimals).replace(/0+$/, "");
+  const grouped = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  const body = fraction.length > 0 ? `${grouped}.${fraction}` : grouped;
+  return `${prefix}${negative ? "-" : ""}${body}`;
+}
+
+// src/token-select/chain-pane.tsx
+import { Tooltip } from "@stableflow/pay-ui/tooltip";
+
+// src/token-select/chain-wallet-status.tsx
+import { IconLogout } from "@stableflow/pay-ui/icons/logout";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function stop(event) {
+  event.preventDefault();
+  event.stopPropagation();
+}
+function ChainWalletStatus({ kind }) {
+  const { wallet, onCopyAddress } = usePayWidgets();
+  const account = wallet.accounts[kind];
+  const address = account?.address?.trim() || "";
+  const hideDisconnect = account?.canDisconnect === false;
+  if (!address) {
+    return /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        onClick: (event) => {
+          stop(event);
+          void wallet.connect(kind);
+        },
+        className: cx("shrink-0 cursor-pointer border-0 bg-transparent p-0 text-xs font-medium text-[#3F8AFB] hover:underline", fontSans),
+        children: account?.connecting ? "Connecting\u2026" : "Connect"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-1", onClick: stop, children: [
+    /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        onClick: async (event) => {
+          stop(event);
+          if (!onCopyAddress) return;
+          onCopyAddress(address);
+        },
+        className: cx("truncate border-0 bg-transparent p-0 text-xs text-[#606060] hover:text-black", fontSans),
+        children: formatAddress(address)
+      }
+    ),
+    hideDisconnect ? null : /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Disconnect",
+        onClick: (event) => {
+          stop(event);
+          void wallet.disconnect(kind);
+        },
+        className: "inline-flex shrink-0 cursor-pointer border-0 bg-transparent p-0 text-[#ff5656]",
+        children: /* @__PURE__ */ jsx2(IconLogout, { className: "size-3" })
+      }
+    )
+  ] });
+}
+
+// src/token-select/utils.ts
+function tokenBalanceUsd(token, formatted) {
+  if (formatted == null || formatted === "") return -1;
+  const amount = Number(formatted);
+  if (!Number.isFinite(amount)) return -1;
+  const price = Number(token.price);
+  return amount * (Number.isFinite(price) ? price : 0);
+}
+function tokenMatchesSearch(token, query) {
+  const q = query.trim().toLowerCase();
+  if (!q) return true;
+  if (token.symbol.toLowerCase().includes(q)) return true;
+  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);
+  return Number.isFinite(amount) && amount > 0;
+}
+function chainHasBalance(blockchain, tokens, getBalance) {
+  return tokens.some(
+    (token) => token.blockchain === blockchain && formattedBalancePositive(getBalance(token))
+  );
+}
+function chainBalanceUsd(blockchain, tokens, getBalanceUsd) {
+  let total = 0;
+  for (const token of tokens) {
+    if (token.blockchain !== blockchain) continue;
+    const usd = getBalanceUsd(token);
+    if (usd > 0) total += usd;
+  }
+  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 = [];
+  for (const part of raw.split(",")) {
+    const trimmed = part.trim();
+    const colon = trimmed.indexOf(":");
+    if (colon <= 0 || colon >= trimmed.length - 1) continue;
+    const blockchain = trimmed.slice(0, colon).trim().toLowerCase();
+    const symbol = trimmed.slice(colon + 1).trim();
+    if (!blockchain || !symbol || symbol.includes(":")) continue;
+    refs.push({ blockchain, symbol: symbol.toUpperCase() });
+  }
+  return refs;
+}
+function popularTokensForWallets(tokens, configured, isChainConnected) {
+  const result = [];
+  for (const ref of configured) {
+    const token = tokens.find((item) => item.blockchain === ref.blockchain && item.symbol.toUpperCase() === ref.symbol);
+    if (!token || !isChainConnected(token.chain.chainKind)) continue;
+    result.push(token);
+  }
+  return result;
+}
+function 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);
+    const rightUsd = chainBalanceUsd(right.blockchain, tokens, options.getBalanceUsd);
+    if (rightUsd !== leftUsd) return rightUsd - leftUsd;
+    return left.chainName.localeCompare(right.chainName);
+  });
+}
+function initialChainFilter(lockChainKind, recentBlockchains, chains) {
+  if (!lockChainKind) return ALL_CHAIN_FILTER;
+  const matching = chains.filter((chain) => chain.chainKind === lockChainKind);
+  if (matching.length === 0) return ALL_CHAIN_FILTER;
+  for (const code of recentBlockchains) {
+    if (matching.some((chain) => chain.blockchain === code)) return code;
+  }
+  return matching[0].blockchain;
+}
+function isBlockchainDisabled(blockchain, disabledBlockchains) {
+  if (!disabledBlockchains?.length) return false;
+  const code = blockchain.toLowerCase();
+  return disabledBlockchains.some((item) => item.toLowerCase() === code);
+}
+function isChainKindLocked(chainKind, lockChainKind) {
+  return Boolean(lockChainKind && chainKind !== lockChainKind);
+}
+var BALANCE_RANK_FUNDED = 0;
+var BALANCE_RANK_LOADING = 1;
+var BALANCE_RANK_EMPTY = 2;
+function tokenBalanceRank(usd, loading) {
+  if (loading) return BALANCE_RANK_LOADING;
+  if (usd > 0) return BALANCE_RANK_FUNDED;
+  return BALANCE_RANK_EMPTY;
+}
+function compareTokensBySymbol(left, right) {
+  return left.symbol.localeCompare(right.symbol) || left.chain.chainName.localeCompare(right.chain.chainName);
+}
+function sortTokensByBalance(tokens, getBalanceUsd, isLoading) {
+  return tokens.slice().sort((left, right) => {
+    const leftRank = tokenBalanceRank(getBalanceUsd(left), isLoading(left));
+    const rightRank = tokenBalanceRank(getBalanceUsd(right), isLoading(right));
+    if (leftRank !== rightRank) return leftRank - rightRank;
+    if (leftRank === BALANCE_RANK_FUNDED) {
+      const byUsd = getBalanceUsd(right) - getBalanceUsd(left);
+      if (byUsd !== 0) return byUsd;
+    }
+    return compareTokensBySymbol(left, right);
+  });
+}
+function sortTokensBySymbol(tokens) {
+  return tokens.slice().sort(compareTokensBySymbol);
+}
+function positiveBalanceTokens(tokens, getBalanceUsd) {
+  return sortTokensByBalance(
+    tokens.filter((token) => getBalanceUsd(token) > 0),
+    getBalanceUsd,
+    () => false
+  );
+}
+function recentTokensInOrder(tokens, recentAssetIds) {
+  const byId = new Map(tokens.map((token) => [token.assetId, token]));
+  const result = [];
+  for (const assetId of recentAssetIds) {
+    const token = byId.get(assetId);
+    if (token) result.push(token);
+  }
+  return result;
+}
+
+// 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 ChainPane(props) {
+  const {
+    chains,
+    fundedBlockchains,
+    showWalletStatus = true,
+    onSelectFilter,
+    lockChainKind = null,
+    disabledBlockchains = null,
+    disabledReason
+  } = props;
+  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 });
+  }
+  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 overflow-y-auto", 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) : 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]"
+          ),
+          children: [
+            wrapDisabled(
+              disabled,
+              reason,
+              /* @__PURE__ */ jsxs2(
+                "button",
+                {
+                  type: "button",
+                  disabled,
+                  onClick: () => {
+                    if (disabled) return;
+                    onSelectFilter(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__ */ 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 })
+                  ]
+                }
+              )
+            ),
+            showWalletStatus ? /* @__PURE__ */ jsx3(ChainWalletStatus, { kind: chain.chainKind }) : null
+          ]
+        },
+        chain.blockchain
+      );
+    }) })
+  ] });
+}
+
+// src/token-select/network-rail.tsx
+import { IconAllNetworks } from "@stableflow/pay-ui/icons/all-networks";
+import { IconWallet } from "@stableflow/pay-ui/icons/wallet";
+import { Tooltip as Tooltip2 } from "@stableflow/pay-ui/tooltip";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function chipClass(selected, disabled) {
+  return cx(
+    "relative flex size-10 shrink-0 items-center justify-center rounded-[12px] border border-solid md:size-[50px]",
+    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,
+    walletConnected,
+    showAllLabel = false,
+    lockChainKind = null,
+    disabledBlockchains = null,
+    disabledReason,
+    onSelectFilter,
+    onOpenNetworks,
+    className
+  } = props;
+  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" })
+      }
+    ) })
+  ] });
+}
+
+// src/token-select/token-pane.tsx
+import { SearchInput } from "@stableflow/pay-ui/search-input";
+import { Skeleton } from "@stableflow/pay-ui/skeleton";
+import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function TokenPane(props) {
+  const {
+    sections,
+    selectedAssetId,
+    loading,
+    showBalances = false,
+    showWalletStatus = true,
+    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,
+      {
+        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
+        )
+      }
+    ) : 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
+    ] })
+  ] });
+}
+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" }),
+    /* @__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" })
+    ] })
+  ] }, index)) });
+}
+function TokenRow(props) {
+  const { token, selected, recent, showBalances, formatted, loadingBalance, disabled, onSelect, className } = props;
+  const usd = showBalances && !loadingBalance && formatted != null ? tokenBalanceUsd(token, formatted) : -1;
+  return /* @__PURE__ */ jsxs4(
+    "button",
+    {
+      type: "button",
+      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]",
+        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(
+              "img",
+              {
+                src: token.chain.logo,
+                alt: "",
+                className: "absolute -right-0.5 -bottom-0.5 size-3.5 rounded-[4px] border border-white object-cover"
+              }
+            )
+          ] }),
+          /* @__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__ */ jsx5("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(
+          "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
+      ]
+    }
+  );
+}
+
+// src/token-select/TokenSelectDialog.tsx
+import { jsx as jsx6, jsxs as jsxs5 } 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;
+}
+function hasAnyOwner(owners) {
+  return Object.values(owners).some((address) => Boolean(address));
+}
+function isNativeToken(token) {
+  const addr = String(token.contractAddress || "").trim().toLowerCase();
+  return !addr || addr === "native" || addr === "0x0000000000000000000000000000000000000000";
+}
+function TokenSelectDialog(props) {
+  const {
+    open,
+    onClose,
+    onSelect,
+    role = "payer",
+    title = "Select Token",
+    selectedAssetId,
+    balanceOwners,
+    allowedBlockchains = null,
+    lockChainKind = null,
+    excludeNative = false,
+    disabledBlockchains = null,
+    disabledReason,
+    className,
+    titleClassName,
+    closeClassName,
+    contentClassName,
+    searchClassName,
+    railClassName,
+    rowClassName
+  } = props;
+  const payer = role === "payer";
+  const showBalances = payer;
+  const { wallet, popularTokens: popularRefs } = usePayWidgets();
+  const { tokens, status } = usePayConfigSnapshot();
+  const prefs2 = useTokenSelectPrefs();
+  const balanceEntries = useSyncExternalStore4(subscribePayTokenBalances, getPayTokenBalances, getPayTokenBalances);
+  const connectedOwners = useMemo2(() => {
+    const owners2 = {};
+    for (const [kind, account] of Object.entries(wallet.accounts)) {
+      const address = account?.address?.trim();
+      if (address) owners2[kind] = address;
+    }
+    return owners2;
+  }, [wallet.accounts]);
+  const owners = showBalances ? { ...connectedOwners, ...balanceOwners } : {};
+  const walletConnected = hasAnyOwner(connectedOwners);
+  const walletWasConnected = useRef(null);
+  const [search, setSearch] = useState("");
+  const [chainFilter, setChainFilter] = useState(ALL_CHAIN_FILTER);
+  const [view, setView] = useState("token");
+  const loading = status === "loading" || status === "idle";
+  useEffect3(() => {
+    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;
+      return;
+    }
+    if (lockChainKind || !payer) {
+      walletWasConnected.current = walletConnected;
+      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(() => {
+    if (!allowedBlockchains || allowedBlockchains.length === 0) return null;
+    return new Set(allowedBlockchains.map((code) => code.toLowerCase()));
+  }, [allowedBlockchains]);
+  const scopedTokens = useMemo2(() => {
+    return tokens.filter((token) => {
+      if (allowed && !allowed.has(token.blockchain.toLowerCase())) return false;
+      if (excludeNative && isNativeToken(token)) return false;
+      if (payer && !token.supportPayment) return false;
+      if (!payer && !token.supportReceive) return false;
+      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 ownersRef = useRef(owners);
+  const tokensRef = useRef(scopedTokens);
+  ownersRef.current = owners;
+  tokensRef.current = scopedTokens;
+  useEffect3(() => {
+    if (!showBalances || !open || !hasAnyOwner(ownersRef.current) || !tokenKey) return;
+    void ensurePayTokenBalances(ownersRef.current, tokensRef.current);
+    const id = window.setInterval(() => {
+      void ensurePayTokenBalances(ownersRef.current, tokensRef.current, { force: true });
+    }, TOKEN_BALANCE_POLL_MS);
+    return () => window.clearInterval(id);
+  }, [showBalances, open, ownerKey2, tokenKey]);
+  function balanceOf(token) {
+    return getPayTokenBalance(ownerForToken(owners, token), token.assetId)?.formatted;
+  }
+  function usdOf(token) {
+    if (!showBalances) return -1;
+    return tokenBalanceUsd(token, balanceOf(token));
+  }
+  function loadingOf(token) {
+    if (!showBalances) return false;
+    const owner = ownerForToken(owners, token);
+    if (!owner) return 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 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)) {
+        funded.add(chain.blockchain);
+      }
+    }
+    return funded;
+  }, [availableChains, owners, scopedTokens, showBalances, balanceEntries]);
+  const popularTokens = useMemo2(
+    () => 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 next = [];
+      const recent = recentTokensInOrder(scopedTokens, prefs2.recentAssetIds);
+      if (recent.length > 0) {
+        next.push({
+          id: "recent",
+          title: "Recently Used",
+          tokens: recent,
+          badgeAssetId: newestAssetId
+        });
+      }
+      const yours = positiveBalanceTokens(scopedTokens, usdOf);
+      if (yours.length > 0) {
+        next.push({ id: "yours", title: "Your Tokens", tokens: yours });
+      }
+      if (popularTokens.length > 0) {
+        next.push({ id: "popular", title: POPULAR_SECTION_TITLE, tokens: popularTokens });
+      }
+      return next;
+    }
+    const matched = scopedTokens.filter((token) => matchesChainFilter(token, chainFilter) && tokenMatchesSearch(token, search));
+    if (!showBalances && chainFilter === ALL_CHAIN_FILTER && !search.trim()) {
+      const next = [];
+      if (popularTokens.length > 0) {
+        next.push({ id: "popular", title: POPULAR_SECTION_TITLE, tokens: popularTokens });
+      }
+      next.push({ id: "all", tokens: sortTokensBySymbol(matched) });
+      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
+    }];
+  }, [
+    showBalances,
+    chainFilter,
+    searchingAll,
+    search,
+    scopedTokens,
+    prefs2.recentAssetIds,
+    newestAssetId,
+    walletKind,
+    balanceEntries,
+    owners,
+    popularTokens,
+    availableChains
+  ]);
+  function handleSelectFilter(filter) {
+    setChainFilter(filter);
+    if (filter !== ALL_CHAIN_FILTER) setLastBlockchain(filter);
+    setView("token");
+  }
+  function handleSelectToken(token) {
+    if (isBlockchainDisabled(token.blockchain, disabledBlockchains)) return;
+    if (isChainKindLocked(token.chain.chainKind, lockChainKind)) return;
+    if (payer) setLastToken(token.assetId, token.blockchain);
+    else setLastBlockchain(token.blockchain);
+    onSelect({ token });
+    onClose();
+  }
+  const awaitingBalances = showBalances && chainFilter === ALL_CHAIN_FILTER && !searchingAll && scopedTokens.some((token) => loadingOf(token));
+  return /* @__PURE__ */ jsx6(
+    Dialog,
+    {
+      open,
+      onClose,
+      title,
+      titleClassName: cx(
+        "min-w-0 flex-1 truncate text-base font-medium text-[#606060] md:flex-none",
+        fontSans,
+        titleClassName
+      ),
+      closeClassName: cx(view === "token" ? "ml-0" : void 0, closeClassName),
+      contentClassName,
+      headerAction: view === "token" ? /* @__PURE__ */ jsx6(
+        SearchInput2,
+        {
+          value: search,
+          onChange: setSearch,
+          placeholder: "search or paste address",
+          className: "ml-auto hidden w-[215px] shrink-0 md:block",
+          inputClassName: cx(SEARCH_INPUT_CLASS, searchClassName)
+        }
+      ) : 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,
+          {
+            value: search,
+            onChange: setSearch,
+            placeholder: "search or paste address",
+            className: "mb-3 shrink-0 md:hidden",
+            inputClassName: cx(SEARCH_INPUT_CLASS, searchClassName)
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs5("div", { className: "flex min-h-0 flex-1", children: [
+          /* @__PURE__ */ jsx6(
+            NetworkRail,
+            {
+              view,
+              chainFilter,
+              chips: sortedChains,
+              fundedBlockchains,
+              walletConnected,
+              showAllLabel: !payer,
+              lockChainKind,
+              disabledBlockchains,
+              disabledReason,
+              onSelectFilter: handleSelectFilter,
+              onOpenNetworks: () => setView("network"),
+              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,
+            {
+              sections,
+              selectedAssetId,
+              loading: loading || awaitingBalances,
+              showBalances,
+              showWalletStatus: payer,
+              getBalance: balanceOf,
+              isBalanceLoading: loadingOf,
+              onSelectToken: handleSelectToken,
+              isTokenDisabled: (token) => isBlockchainDisabled(token.blockchain, disabledBlockchains) || isChainKindLocked(token.chain.chainKind, lockChainKind),
+              searchClassName,
+              rowClassName
+            }
+          ) })
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  DEFAULT_API_HOST,
+  PayWidgetsProvider,
+  TokenSelectDialog,
+  clearPayTokenBalances,
+  mapPayConfigSource,
+  normalizePayConfig,
+  parsePopularTokens,
+  refreshPayTokenBalance,
+  usePayConfig,
+  usePayConfigSnapshot,
+  usePayTokenBalance
+};
+//# sourceMappingURL=index.js.map