kaleido-ui 0.1.105 → 0.1.107

package/dist/web/index.cjs

@@ -3800,6 +3800,42 @@ function readableTagColor(color) {
   const luminance = (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;
   return luminance < 0.45 ? `color-mix(in srgb, ${color} 45%, white)` : color;
 }
+var chipBaseClass = "shrink-0 rounded-full text-tiny font-bold uppercase tracking-wide shadow-inner transition-colors";
+var chipActiveClass = "bg-primary/[0.14] text-primary";
+var chipIdleClass = "bg-surface-card text-text-dimmed hover:text-white/75";
+function AssetSelectorNetworkMark({ network }) {
+  return network.iconUrl ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("img", { src: network.iconUrl, alt: "", className: "size-4 shrink-0 rounded-full" }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "flex size-4 shrink-0 items-center justify-center rounded-full bg-muted text-xxs font-bold uppercase leading-none text-muted-foreground", children: network.label.charAt(0) });
+}
+function AssetSelectorNetworkFilterTrigger({
+  activeNetworkOption,
+  open,
+  onClick
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: cn(
+        chipBaseClass,
+        "flex items-center gap-1.5 py-1.5 pl-2 pr-2.5",
+        activeNetworkOption || open ? chipActiveClass : chipIdleClass
+      ),
+      children: [
+        activeNetworkOption && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(AssetSelectorNetworkMark, { network: activeNetworkOption }),
+        activeNetworkOption ? activeNetworkOption.label : "All",
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          Icon,
+          {
+            name: "expand_more",
+            size: "xs",
+            className: cn("shrink-0 transition-transform duration-200", open && "rotate-180")
+          }
+        )
+      ]
+    }
+  );
+}
 function AssetSelector({
   label,
   selectedTicker,
@@ -3807,6 +3843,8 @@ function AssetSelector({
   options,
   categories = [],
   defaultActiveCategories,
+  networks = [],
+  quickAssets = [],
   networkFilter,
   venueFilter,
   disabled,
@@ -3821,16 +3859,25 @@ function AssetSelector({
   const [activeCategories, setActiveCategories] = (0, import_react11.useState)(
     defaultActiveCategories ?? categories.map((category) => category.id)
   );
+  const [activeNetwork, setActiveNetwork] = (0, import_react11.useState)(null);
+  const [networkMenuOpen, setNetworkMenuOpen] = (0, import_react11.useState)(false);
+  const [activeQuickAsset, setActiveQuickAsset] = (0, import_react11.useState)(null);
   const selectedKey = selectedId ?? selectedTicker;
   const selected = options.find((option) => option.id === selectedKey) ?? options.find((option) => option.ticker === selectedTicker);
   const selectedOptionId = selected?.id ?? selectedKey;
   const hasCategoryFilters = categories.length > 0;
+  const hasNetworkFilter = networks.length > 0;
+  const hasQuickAssets = quickAssets.length > 0;
+  const activeNetworkOption = networks.find((network) => network.id === activeNetwork) ?? null;
   const filtered = options.filter((option) => {
     const category = option.category ?? null;
     const matchesCategory = !hasCategoryFilters || category === null || activeCategories.includes(category);
     const matchesNetwork = !networkFilter || option.network === networkFilter;
+    const matchesNetworkFilter = !activeNetwork || option.networkId == null || option.networkId === activeNetwork;
+    const matchesQuickAsset = !activeQuickAsset || option.ticker.toUpperCase() === activeQuickAsset;
     const matchesVenue = !venueFilter || option.venue === venueFilter;
-    if (!matchesCategory || !matchesNetwork || !matchesVenue) return false;
+    if (!matchesCategory || !matchesNetwork || !matchesNetworkFilter || !matchesQuickAsset || !matchesVenue)
+      return false;
     if (!search) return true;
     const searchValue = search.toLowerCase();
     const matchesSearch = option.ticker.toLowerCase().includes(searchValue) || (option.name?.toLowerCase().includes(searchValue) ?? false) || (option.assetId?.toLowerCase().includes(searchValue) ?? false) || (option.network?.toLowerCase().includes(searchValue) ?? false) || (option.networkTag?.label.toLowerCase().includes(searchValue) ?? false) || (option.category?.toLowerCase().includes(searchValue) ?? false);
@@ -3847,6 +3894,117 @@ function AssetSelector({
     disabled: option.id === disabledId || option.ticker === disabledTicker
   }));
   const categoryLabelById = new Map(categories.map((category) => [category.id, category.label]));
+  const networkFilterButton = hasNetworkFilter && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "relative shrink-0", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      AssetSelectorNetworkFilterTrigger,
+      {
+        activeNetworkOption,
+        open: networkMenuOpen,
+        onClick: () => setNetworkMenuOpen((value) => !value)
+      }
+    ),
+    networkMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "absolute right-0 top-full z-10 mt-1.5 w-48 overflow-hidden rounded-xl border border-white/[0.08] bg-popover shadow-popover", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "max-h-60 overflow-y-auto p-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setActiveNetwork(null);
+            setNetworkMenuOpen(false);
+          },
+          className: cn(
+            "flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-xs font-semibold transition-colors",
+            activeNetwork === null ? "bg-primary/[0.14] text-primary" : "text-white/75 hover:bg-accent hover:text-white"
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Icon, { name: "hub", size: "xs", className: "shrink-0" }),
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "min-w-0 flex-1 truncate text-left", children: "All networks" }),
+            activeNetwork === null && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Icon, { name: "check", size: "xs", className: "shrink-0 text-primary" })
+          ]
+        }
+      ),
+      networks.map((network) => {
+        const isActive = activeNetwork === network.id;
+        return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              setActiveNetwork(network.id);
+              setNetworkMenuOpen(false);
+            },
+            className: cn(
+              "flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-xs font-semibold transition-colors",
+              isActive ? "bg-primary/[0.14] text-primary" : "text-white/75 hover:bg-accent hover:text-white"
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(AssetSelectorNetworkMark, { network }),
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "min-w-0 flex-1 truncate text-left", children: network.label }),
+              isActive && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Icon, { name: "check", size: "xs", className: "shrink-0 text-primary" })
+            ]
+          },
+          network.id
+        );
+      })
+    ] }) })
+  ] });
+  const filterControls = (hasQuickAssets || hasCategoryFilters) && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+    hasQuickAssets && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "mt-3 flex flex-wrap items-center gap-1.5", children: quickAssets.map((quick) => {
+      const tickerKey = quick.ticker.toUpperCase();
+      const isActive = activeQuickAsset === tickerKey;
+      return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+        "button",
+        {
+          type: "button",
+          onClick: () => setActiveQuickAsset(isActive ? null : tickerKey),
+          className: cn(
+            chipBaseClass,
+            "flex items-center gap-1.5 py-1 pl-1.5 pr-2.5",
+            isActive ? chipActiveClass : chipIdleClass
+          ),
+          children: [
+            quick.iconUrl ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("img", { src: quick.iconUrl, alt: "", className: "size-4 shrink-0 rounded-full" }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(AssetIcon, { ticker: quick.ticker, size: 16, className: "shrink-0" }),
+            quick.ticker
+          ]
+        },
+        tickerKey
+      );
+    }) }),
+    hasCategoryFilters && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "mt-3 flex flex-wrap items-center gap-1.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => setActiveCategories(categories.map((category) => category.id)),
+          className: cn(
+            chipBaseClass,
+            "px-2.5 py-1",
+            activeCategories.length === categories.length ? chipActiveClass : chipIdleClass
+          ),
+          children: "All"
+        }
+      ),
+      categories.map((category) => {
+        const isActive = activeCategories.includes(category.id);
+        return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => setActiveCategories(
+              (current) => current.includes(category.id) ? current.filter((value) => value !== category.id) : [...current, category.id]
+            ),
+            className: cn(
+              chipBaseClass,
+              "px-2.5 py-1",
+              isActive ? chipActiveClass : chipIdleClass
+            ),
+            children: category.label
+          },
+          category.id
+        );
+      })
+    ] })
+  ] });
   const renderAssetOption = (option, optionSelected, optionDisabled) => {
     const optionCategoryLabel = option.categoryLabel || (option.category ? categoryLabelById.get(option.category) : void 0);
     const hasNetworkBadge = Boolean(option.networkIconUrl || option.networkTag);
@@ -3915,6 +4073,7 @@ function AssetSelector({
     const closePanel = () => {
       setOpen(false);
       setSearch("");
+      setNetworkMenuOpen(false);
     };
     return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "relative w-36 flex-shrink-0", children: [
       /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
@@ -3974,7 +4133,7 @@ function AssetSelector({
                         " available"
                       ] })
                     ] }),
-                    selected && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center gap-2 rounded-full bg-white/5 px-2.5 py-1", children: [
+                    networkFilterButton || selected && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center gap-2 rounded-full bg-white/5 px-2.5 py-1", children: [
                       /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(AssetIcon, { ticker: selected.ticker, logoUri: selected.icon, size: 18 }),
                       /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "text-tiny font-semibold text-white", children: selected.ticker })
                     ] })
@@ -4001,38 +4160,7 @@ function AssetSelector({
                         }
                       )
                     ] }),
-                    hasCategoryFilters && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "mt-3 flex flex-wrap items-center gap-1.5", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-                        "button",
-                        {
-                          type: "button",
-                          onClick: () => setActiveCategories(categories.map((category) => category.id)),
-                          className: cn(
-                            "rounded-full px-2.5 py-1 text-tiny font-bold uppercase tracking-wide shadow-inner transition-colors",
-                            activeCategories.length === categories.length ? "bg-primary/[0.14] text-primary" : "bg-surface-card text-text-dimmed hover:text-white/75"
-                          ),
-                          children: "All"
-                        }
-                      ),
-                      categories.map((category) => {
-                        const isActive = activeCategories.includes(category.id);
-                        return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-                          "button",
-                          {
-                            type: "button",
-                            onClick: () => setActiveCategories(
-                              (current) => current.includes(category.id) ? current.filter((value) => value !== category.id) : [...current, category.id]
-                            ),
-                            className: cn(
-                              "rounded-full px-2.5 py-1 text-tiny font-bold uppercase tracking-wide shadow-inner transition-colors",
-                              isActive ? "bg-primary/[0.14] text-primary" : "bg-surface-card text-text-dimmed hover:text-white/75"
-                            ),
-                            children: category.label
-                          },
-                          category.id
-                        );
-                      })
-                    ] })
+                    filterControls
                   ] }),
                   /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "mx-4 h-px bg-white/[0.06]" }),
                   /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ScrollArea, { className: "min-h-0 flex-1", viewportClassName: "max-h-[56vh] px-2 py-2 pb-6", children: filtered.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex flex-col items-center gap-2 px-4 py-10 text-center text-sm text-white/30", children: [
@@ -4125,7 +4253,7 @@ function AssetSelector({
               " available"
             ] })
           ] }),
-          selected && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center gap-2 rounded-full bg-white/5 px-2.5 py-1", children: [
+          networkFilterButton || selected && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center gap-2 rounded-full bg-white/5 px-2.5 py-1", children: [
             /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(AssetIcon, { ticker: selected.ticker, logoUri: selected.icon, size: 18 }),
             /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "text-tiny font-semibold text-white", children: selected.ticker })
           ] })
@@ -4152,38 +4280,7 @@ function AssetSelector({
               }
             )
           ] }),
-          hasCategoryFilters && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "mt-3 flex flex-wrap items-center gap-1.5", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-              "button",
-              {
-                type: "button",
-                onClick: () => setActiveCategories(categories.map((category) => category.id)),
-                className: cn(
-                  "rounded-full px-2.5 py-1 text-tiny font-bold uppercase tracking-wide shadow-inner transition-colors",
-                  activeCategories.length === categories.length ? "bg-primary/[0.14] text-primary" : "bg-surface-card text-text-dimmed hover:text-white/75"
-                ),
-                children: "All"
-              }
-            ),
-            categories.map((category) => {
-              const isActive = activeCategories.includes(category.id);
-              return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => setActiveCategories(
-                    (current) => current.includes(category.id) ? current.filter((value) => value !== category.id) : [...current, category.id]
-                  ),
-                  className: cn(
-                    "rounded-full px-2.5 py-1 text-tiny font-bold uppercase tracking-wide shadow-inner transition-colors",
-                    isActive ? "bg-primary/[0.14] text-primary" : "bg-surface-card text-text-dimmed hover:text-white/75"
-                  ),
-                  children: category.label
-                },
-                category.id
-              );
-            })
-          ] })
+          filterControls
         ] })
       ] }),
       renderOption: ({ option, selected: optionSelected, disabled: optionDisabled }) => {
@@ -4206,6 +4303,8 @@ function SwapInputCard({
   toOptions,
   categories,
   defaultActiveCategories,
+  fromNetworks,
+  fromQuickAssets,
   availableText,
   showMaxText = false,
   maxText,
@@ -4283,6 +4382,8 @@ function SwapInputCard({
               options: fromOptions,
               categories,
               defaultActiveCategories,
+              networks: fromNetworks,
+              quickAssets: fromQuickAssets,
               disabledId: toSelectedId,
               onChange: onFromTickerChange
             }

package/dist/web/index.d.cts

@@ -726,6 +726,8 @@ interface AssetSelectorOption {
     assetId?: string;
     category?: string | null;
     categoryLabel?: string;
+    /** Network id matched against the network filter slider; options without one always pass. */
+    networkId?: string;
     /** URL of the network mark rendered as a mini-badge over the asset icon. */
     networkIconUrl?: string;
     /** Right-aligned network tag: label pill tinted with `color`, ticker beneath. */
@@ -738,6 +740,19 @@ interface AssetSelectorCategory {
     id: string;
     label: string;
 }
+/** One entry of the single-select network filter slider inside the picker panel. */
+interface AssetSelectorNetworkOption {
+    id: string;
+    label: string;
+    /** Network mark rendered inside the chip; falls back to a lettered dot. */
+    iconUrl?: string;
+}
+/** One entry of the quick-asset filter chips (e.g. BTC / USDT / USDC). */
+interface AssetSelectorQuickAsset {
+    ticker: string;
+    /** Icon URL for the chip; falls back to AssetIcon's local/CDN resolution. */
+    iconUrl?: string;
+}
 interface AssetSelectorProps {
     label: string;
     selectedTicker: string;
@@ -745,6 +760,18 @@ interface AssetSelectorProps {
     options: AssetSelectorOption[];
     categories?: AssetSelectorCategory[];
     defaultActiveCategories?: string[];
+    /**
+     * Single-select network filter rendered as a dropdown button in the panel's
+     * top-right corner ("All" by default). Selecting a network keeps only
+     * options whose `networkId` matches (options without a `networkId` always
+     * pass, mirroring the category convention).
+     */
+    networks?: AssetSelectorNetworkOption[];
+    /**
+     * Quick-asset chips rendered under the search input. Pressing one narrows
+     * the list to that ticker; pressing it again clears the filter.
+     */
+    quickAssets?: AssetSelectorQuickAsset[];
     networkFilter?: NetworkType | null;
     venueFilter?: string | null;
     disabled?: boolean;
@@ -754,7 +781,7 @@ interface AssetSelectorProps {
     onOpenPanelHeightChange?: (height: number) => void;
     onChange: (id: string) => void;
 }
-declare function AssetSelector({ label, selectedTicker, selectedId, options, categories, defaultActiveCategories, networkFilter, venueFilter, disabled, disabledTicker, disabledId, compact, onOpenPanelHeightChange, onChange, }: AssetSelectorProps): react_jsx_runtime.JSX.Element;
+declare function AssetSelector({ label, selectedTicker, selectedId, options, categories, defaultActiveCategories, networks, quickAssets, networkFilter, venueFilter, disabled, disabledTicker, disabledId, compact, onOpenPanelHeightChange, onChange, }: AssetSelectorProps): react_jsx_runtime.JSX.Element;
 
 interface SwapInputCardProps {
     fromTicker: string;
@@ -766,6 +793,10 @@ interface SwapInputCardProps {
     toOptions: AssetSelectorOption[];
     categories?: AssetSelectorCategory[];
     defaultActiveCategories?: string[];
+    /** Network filter slider rendered inside the "You Pay" asset picker. */
+    fromNetworks?: AssetSelectorNetworkOption[];
+    /** Quick-asset chips rendered inside the "You Pay" asset picker. */
+    fromQuickAssets?: AssetSelectorQuickAsset[];
     availableText: string;
     showMaxText?: boolean;
     maxText?: string;
@@ -804,7 +835,7 @@ interface SwapInputCardProps {
     onFlip: () => void;
     onSubmit: () => void;
 }
-declare function SwapInputCard({ fromTicker, toTicker, fromSelectedId, toSelectedId, fromInput, fromOptions, toOptions, categories, defaultActiveCategories, availableText, showMaxText, maxText, selectedPercentage, percentageDisabled, hidePercentages, oneWay, fromUnitLabel, fromDisplayUnit, fromUnitIsToggle, receiveAmount, receiveUnitLabel, receiveDisplayUnit, isLoadingQuote, quoteError, quoteRateText, quoteVenueText, quoteVenueTone, quoteFeeText, quoteExpiresText, quoteExpiresUrgent, warning, submitLabel, submitIcon, submitVariant, submitDisabled, onFromTickerChange, onToTickerChange, onFromInputChange, onPercentageClick, onToggleFromUnit, onFlip, onSubmit, }: SwapInputCardProps): react_jsx_runtime.JSX.Element;
+declare function SwapInputCard({ fromTicker, toTicker, fromSelectedId, toSelectedId, fromInput, fromOptions, toOptions, categories, defaultActiveCategories, fromNetworks, fromQuickAssets, availableText, showMaxText, maxText, selectedPercentage, percentageDisabled, hidePercentages, oneWay, fromUnitLabel, fromDisplayUnit, fromUnitIsToggle, receiveAmount, receiveUnitLabel, receiveDisplayUnit, isLoadingQuote, quoteError, quoteRateText, quoteVenueText, quoteVenueTone, quoteFeeText, quoteExpiresText, quoteExpiresUrgent, warning, submitLabel, submitIcon, submitVariant, submitDisabled, onFromTickerChange, onToTickerChange, onFromInputChange, onPercentageClick, onToggleFromUnit, onFlip, onSubmit, }: SwapInputCardProps): react_jsx_runtime.JSX.Element;
 
 interface ActivityListItem<TData = unknown> {
     id: string;
@@ -1806,4 +1837,4 @@ declare function getFallbackAssetIconUrl(seed: string): string;
  */
 declare function useAssetIcon(ticker: string, cdnBaseUrl?: string): string;
 
-export { AccountCapabilitiesCard, type AccountCapabilitiesCardProps, AccountChoiceChip, AccountHeaderIcons, AccountInfoGrid, AccountNetworkNotice, AccountNetworkPicker, AccountNetworkSelector, AccountNotice, type AccountSettingsNetwork, type AccountSettingsProtocol, AccountSettingsRow, AccountSettingsShell, AccountStatusPills, type AccountStatusTabItem, AccountStatusTabs, type AccountStatusTabsProps, ActionTile, type ActionTileProps, ActivityDetailRow, type ActivityDetailRowProps, ActivityFilterBar, type ActivityFilterBarProps, ActivityList, type ActivityListItem, type ActivityListProps, type ActivityNetworkFilterOption, type ActivityNetworkFilterValue, ActivityNetworkFilters, type ActivityNetworkFiltersProps, ActivityRow, type ActivityRowProps, type ActivityStatusOption, type ActivityTypeTabCounts, type ActivityTypeTabValue, ActivityTypeTabs, AlertBanner, type AmountDisplayOptions, type AmountDisplayUnit, AppIcon, type AppIconName, type AppIconProps, ArkadeNetworkIcon, AssetCard, type AssetCardProps, AssetIcon, AssetSelector, type AssetSelectorCategory, type AssetSelectorOption, type AssetSelectorProps, BalanceBreakdown, type BalanceBreakdownAccounts, type BalanceBreakdownAsset, type BalanceBreakdownNodeInfo, type BalanceBreakdownProps, BottomNav, type BottomNavItem, type BottomNavProps, BottomSheet, type BottomSheetAction, type BottomSheetProps, BtcUnifiedReceive, type BtcUnifiedReceiveAddress, type BtcUnifiedReceiveProps, type BtcUnifiedReceiveResult, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CopyIcon, type DepositAccountId, DepositAssetSelection, type DepositAssetSelectionProps, type DepositGeneratedAsset, DepositGeneratedView, type DepositGeneratedViewProps, type DepositGenerationController, type DepositInvoiceAsset, DepositInvoiceGeneration, type DepositInvoiceGenerationProps, type DepositNetworkConfigEntry, DepositNetworkDefaultModal, type DepositNetworkDefaultModalProps, type DepositNetworkKey, type DepositNetworkOption, DepositPreGeneration, type DepositPreGenerationAsset, type DepositPreGenerationProps, type DepositSelectionAsset, DepositSuccessScreen, type DepositSuccessScreenProps, type DepositTransferMethod, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DisclosureCard, type DisclosureCardProps, DotPagination, type DotPaginationProps, type DotTone, ErrorBoundary, ErrorCard, type ErrorCardProps, ExpandIcon, ExtensionPageFrame, type ExtensionPageFrameProps, FadeOverlay, type FadeOverlayProps, FilterChipGroup, type FilterChipGroupProps, type FilterChipOption, FilterDropdown, type FilterDropdownOption, type FilterDropdownProps, HeadlineGradient, type HeadlineGradientProps, Icon, type IconName, type IconProps, Icons, InfoPanel, type InfoPanelProps, InlineAction, InlineSelector, type InlineSelectorOption, type InlineSelectorProps, Input, type InputProps, InvoiceStatusBanner, KaleidoScopeHeroAnimation, type KaleidoScopeHeroAnimationProps, Label, LightningNetworkIcon, LiquidNetworkIcon, ListSkeletonRows, type ListSkeletonRowsProps, LoadingCard, type LoadingCardProps, MethodChoiceChip, MetricCard, type MetricCardProps, MobileHeroAnimation, type MobileHeroAnimationProps, NETWORK_CONFIG, NetworkBadge, type NetworkBadgeProps, type NetworkIconProps, NetworkInfoDisclosure, NetworkStatusChip, type NetworkStatusChipProps, type NetworkType, NostrNetworkIcon, NumberInput, type NumberInputProps, OptionSelector, type OptionSelectorOption, type OptionSelectorProps, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, PaidOverlay, QrCode, type QrCodeProps, RecoveryPhraseCard, type RecoveryPhraseCardProps, RgbNetworkIcon, ScrollArea, type ScrollAreaProps, SecretRevealCard, type SecretRevealCardProps, SectionHeader, type SectionHeaderProps, SectionLabel, SectionTitle, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, SelectableCard, type SelectableCardProps, SettingItem, SettingsActionButton, SettingsSectionCard, type SettingsSectionCardProps, SettingsSelectorRow, type SettingsSelectorRowProps, SettingsStatusPanel, SettingsTile, type SettingsTileProps, Skeleton, type SkeletonProps, type SkeletonTone, SparkNetworkIcon, StatusBadge, StatusIconBadge, type StatusIconBadgeProps, type StatusType, StepperNumberInput, type StepperNumberInputProps, SwapInputCard, type SwapInputCardProps, Switch, SwitchRow, type SwitchRowProps, Tabs, TabsContent, TabsList, TabsTrigger, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, ToneBadge, type ToneBadgeProps, TransactionCard, type TransactionCardProps, TransferRouteCard, WalletAssetList, type WalletAssetListEmptyState, type WalletAssetListItem, type WalletAssetListProps, type WithdrawAddressType, WithdrawAmountInput, type WithdrawAmountInputProps, WithdrawConfirmation, type WithdrawConfirmationProps, type WithdrawConfirmationRgbInvoice, type WithdrawDecodedLnInvoice, type WithdrawDecodedRgbInvoice, WithdrawDestinationInput, type WithdrawDestinationInputProps, type WithdrawInvoiceAsset, WithdrawInvoiceInfo, type WithdrawInvoiceInfoLnInvoice, type WithdrawInvoiceInfoProps, type WithdrawInvoiceInfoRgbInvoice, type WithdrawLnurlPayData, type WithdrawRouteOption, WithdrawRouteSelector, type WithdrawRouteSelectorProps, type WithdrawRouteSummary, WithdrawSuccess, type WithdrawSuccessProps, buttonVariants, cn, formatDisplayAmountText, getAccountNetworkLabel, getAccountNetworkUi, getAccountStatusUi, getActivityNetworkFilterIcon, getAssetIconUrl, getFallbackAssetIconUrl, toast, useAssetIcon, useToast };
+export { AccountCapabilitiesCard, type AccountCapabilitiesCardProps, AccountChoiceChip, AccountHeaderIcons, AccountInfoGrid, AccountNetworkNotice, AccountNetworkPicker, AccountNetworkSelector, AccountNotice, type AccountSettingsNetwork, type AccountSettingsProtocol, AccountSettingsRow, AccountSettingsShell, AccountStatusPills, type AccountStatusTabItem, AccountStatusTabs, type AccountStatusTabsProps, ActionTile, type ActionTileProps, ActivityDetailRow, type ActivityDetailRowProps, ActivityFilterBar, type ActivityFilterBarProps, ActivityList, type ActivityListItem, type ActivityListProps, type ActivityNetworkFilterOption, type ActivityNetworkFilterValue, ActivityNetworkFilters, type ActivityNetworkFiltersProps, ActivityRow, type ActivityRowProps, type ActivityStatusOption, type ActivityTypeTabCounts, type ActivityTypeTabValue, ActivityTypeTabs, AlertBanner, type AmountDisplayOptions, type AmountDisplayUnit, AppIcon, type AppIconName, type AppIconProps, ArkadeNetworkIcon, AssetCard, type AssetCardProps, AssetIcon, AssetSelector, type AssetSelectorCategory, type AssetSelectorNetworkOption, type AssetSelectorOption, type AssetSelectorProps, type AssetSelectorQuickAsset, BalanceBreakdown, type BalanceBreakdownAccounts, type BalanceBreakdownAsset, type BalanceBreakdownNodeInfo, type BalanceBreakdownProps, BottomNav, type BottomNavItem, type BottomNavProps, BottomSheet, type BottomSheetAction, type BottomSheetProps, BtcUnifiedReceive, type BtcUnifiedReceiveAddress, type BtcUnifiedReceiveProps, type BtcUnifiedReceiveResult, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CopyIcon, type DepositAccountId, DepositAssetSelection, type DepositAssetSelectionProps, type DepositGeneratedAsset, DepositGeneratedView, type DepositGeneratedViewProps, type DepositGenerationController, type DepositInvoiceAsset, DepositInvoiceGeneration, type DepositInvoiceGenerationProps, type DepositNetworkConfigEntry, DepositNetworkDefaultModal, type DepositNetworkDefaultModalProps, type DepositNetworkKey, type DepositNetworkOption, DepositPreGeneration, type DepositPreGenerationAsset, type DepositPreGenerationProps, type DepositSelectionAsset, DepositSuccessScreen, type DepositSuccessScreenProps, type DepositTransferMethod, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DisclosureCard, type DisclosureCardProps, DotPagination, type DotPaginationProps, type DotTone, ErrorBoundary, ErrorCard, type ErrorCardProps, ExpandIcon, ExtensionPageFrame, type ExtensionPageFrameProps, FadeOverlay, type FadeOverlayProps, FilterChipGroup, type FilterChipGroupProps, type FilterChipOption, FilterDropdown, type FilterDropdownOption, type FilterDropdownProps, HeadlineGradient, type HeadlineGradientProps, Icon, type IconName, type IconProps, Icons, InfoPanel, type InfoPanelProps, InlineAction, InlineSelector, type InlineSelectorOption, type InlineSelectorProps, Input, type InputProps, InvoiceStatusBanner, KaleidoScopeHeroAnimation, type KaleidoScopeHeroAnimationProps, Label, LightningNetworkIcon, LiquidNetworkIcon, ListSkeletonRows, type ListSkeletonRowsProps, LoadingCard, type LoadingCardProps, MethodChoiceChip, MetricCard, type MetricCardProps, MobileHeroAnimation, type MobileHeroAnimationProps, NETWORK_CONFIG, NetworkBadge, type NetworkBadgeProps, type NetworkIconProps, NetworkInfoDisclosure, NetworkStatusChip, type NetworkStatusChipProps, type NetworkType, NostrNetworkIcon, NumberInput, type NumberInputProps, OptionSelector, type OptionSelectorOption, type OptionSelectorProps, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, PaidOverlay, QrCode, type QrCodeProps, RecoveryPhraseCard, type RecoveryPhraseCardProps, RgbNetworkIcon, ScrollArea, type ScrollAreaProps, SecretRevealCard, type SecretRevealCardProps, SectionHeader, type SectionHeaderProps, SectionLabel, SectionTitle, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, SelectableCard, type SelectableCardProps, SettingItem, SettingsActionButton, SettingsSectionCard, type SettingsSectionCardProps, SettingsSelectorRow, type SettingsSelectorRowProps, SettingsStatusPanel, SettingsTile, type SettingsTileProps, Skeleton, type SkeletonProps, type SkeletonTone, SparkNetworkIcon, StatusBadge, StatusIconBadge, type StatusIconBadgeProps, type StatusType, StepperNumberInput, type StepperNumberInputProps, SwapInputCard, type SwapInputCardProps, Switch, SwitchRow, type SwitchRowProps, Tabs, TabsContent, TabsList, TabsTrigger, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, ToneBadge, type ToneBadgeProps, TransactionCard, type TransactionCardProps, TransferRouteCard, WalletAssetList, type WalletAssetListEmptyState, type WalletAssetListItem, type WalletAssetListProps, type WithdrawAddressType, WithdrawAmountInput, type WithdrawAmountInputProps, WithdrawConfirmation, type WithdrawConfirmationProps, type WithdrawConfirmationRgbInvoice, type WithdrawDecodedLnInvoice, type WithdrawDecodedRgbInvoice, WithdrawDestinationInput, type WithdrawDestinationInputProps, type WithdrawInvoiceAsset, WithdrawInvoiceInfo, type WithdrawInvoiceInfoLnInvoice, type WithdrawInvoiceInfoProps, type WithdrawInvoiceInfoRgbInvoice, type WithdrawLnurlPayData, type WithdrawRouteOption, WithdrawRouteSelector, type WithdrawRouteSelectorProps, type WithdrawRouteSummary, WithdrawSuccess, type WithdrawSuccessProps, buttonVariants, cn, formatDisplayAmountText, getAccountNetworkLabel, getAccountNetworkUi, getAccountStatusUi, getActivityNetworkFilterIcon, getAssetIconUrl, getFallbackAssetIconUrl, toast, useAssetIcon, useToast };

package/dist/web/index.d.ts

@@ -726,6 +726,8 @@ interface AssetSelectorOption {
     assetId?: string;
     category?: string | null;
     categoryLabel?: string;
+    /** Network id matched against the network filter slider; options without one always pass. */
+    networkId?: string;
     /** URL of the network mark rendered as a mini-badge over the asset icon. */
     networkIconUrl?: string;
     /** Right-aligned network tag: label pill tinted with `color`, ticker beneath. */
@@ -738,6 +740,19 @@ interface AssetSelectorCategory {
     id: string;
     label: string;
 }
+/** One entry of the single-select network filter slider inside the picker panel. */
+interface AssetSelectorNetworkOption {
+    id: string;
+    label: string;
+    /** Network mark rendered inside the chip; falls back to a lettered dot. */
+    iconUrl?: string;
+}
+/** One entry of the quick-asset filter chips (e.g. BTC / USDT / USDC). */
+interface AssetSelectorQuickAsset {
+    ticker: string;
+    /** Icon URL for the chip; falls back to AssetIcon's local/CDN resolution. */
+    iconUrl?: string;
+}
 interface AssetSelectorProps {
     label: string;
     selectedTicker: string;
@@ -745,6 +760,18 @@ interface AssetSelectorProps {
     options: AssetSelectorOption[];
     categories?: AssetSelectorCategory[];
     defaultActiveCategories?: string[];
+    /**
+     * Single-select network filter rendered as a dropdown button in the panel's
+     * top-right corner ("All" by default). Selecting a network keeps only
+     * options whose `networkId` matches (options without a `networkId` always
+     * pass, mirroring the category convention).
+     */
+    networks?: AssetSelectorNetworkOption[];
+    /**
+     * Quick-asset chips rendered under the search input. Pressing one narrows
+     * the list to that ticker; pressing it again clears the filter.
+     */
+    quickAssets?: AssetSelectorQuickAsset[];
     networkFilter?: NetworkType | null;
     venueFilter?: string | null;
     disabled?: boolean;
@@ -754,7 +781,7 @@ interface AssetSelectorProps {
     onOpenPanelHeightChange?: (height: number) => void;
     onChange: (id: string) => void;
 }
-declare function AssetSelector({ label, selectedTicker, selectedId, options, categories, defaultActiveCategories, networkFilter, venueFilter, disabled, disabledTicker, disabledId, compact, onOpenPanelHeightChange, onChange, }: AssetSelectorProps): react_jsx_runtime.JSX.Element;
+declare function AssetSelector({ label, selectedTicker, selectedId, options, categories, defaultActiveCategories, networks, quickAssets, networkFilter, venueFilter, disabled, disabledTicker, disabledId, compact, onOpenPanelHeightChange, onChange, }: AssetSelectorProps): react_jsx_runtime.JSX.Element;
 
 interface SwapInputCardProps {
     fromTicker: string;
@@ -766,6 +793,10 @@ interface SwapInputCardProps {
     toOptions: AssetSelectorOption[];
     categories?: AssetSelectorCategory[];
     defaultActiveCategories?: string[];
+    /** Network filter slider rendered inside the "You Pay" asset picker. */
+    fromNetworks?: AssetSelectorNetworkOption[];
+    /** Quick-asset chips rendered inside the "You Pay" asset picker. */
+    fromQuickAssets?: AssetSelectorQuickAsset[];
     availableText: string;
     showMaxText?: boolean;
     maxText?: string;
@@ -804,7 +835,7 @@ interface SwapInputCardProps {
     onFlip: () => void;
     onSubmit: () => void;
 }
-declare function SwapInputCard({ fromTicker, toTicker, fromSelectedId, toSelectedId, fromInput, fromOptions, toOptions, categories, defaultActiveCategories, availableText, showMaxText, maxText, selectedPercentage, percentageDisabled, hidePercentages, oneWay, fromUnitLabel, fromDisplayUnit, fromUnitIsToggle, receiveAmount, receiveUnitLabel, receiveDisplayUnit, isLoadingQuote, quoteError, quoteRateText, quoteVenueText, quoteVenueTone, quoteFeeText, quoteExpiresText, quoteExpiresUrgent, warning, submitLabel, submitIcon, submitVariant, submitDisabled, onFromTickerChange, onToTickerChange, onFromInputChange, onPercentageClick, onToggleFromUnit, onFlip, onSubmit, }: SwapInputCardProps): react_jsx_runtime.JSX.Element;
+declare function SwapInputCard({ fromTicker, toTicker, fromSelectedId, toSelectedId, fromInput, fromOptions, toOptions, categories, defaultActiveCategories, fromNetworks, fromQuickAssets, availableText, showMaxText, maxText, selectedPercentage, percentageDisabled, hidePercentages, oneWay, fromUnitLabel, fromDisplayUnit, fromUnitIsToggle, receiveAmount, receiveUnitLabel, receiveDisplayUnit, isLoadingQuote, quoteError, quoteRateText, quoteVenueText, quoteVenueTone, quoteFeeText, quoteExpiresText, quoteExpiresUrgent, warning, submitLabel, submitIcon, submitVariant, submitDisabled, onFromTickerChange, onToTickerChange, onFromInputChange, onPercentageClick, onToggleFromUnit, onFlip, onSubmit, }: SwapInputCardProps): react_jsx_runtime.JSX.Element;
 
 interface ActivityListItem<TData = unknown> {
     id: string;
@@ -1806,4 +1837,4 @@ declare function getFallbackAssetIconUrl(seed: string): string;
  */
 declare function useAssetIcon(ticker: string, cdnBaseUrl?: string): string;
 
-export { AccountCapabilitiesCard, type AccountCapabilitiesCardProps, AccountChoiceChip, AccountHeaderIcons, AccountInfoGrid, AccountNetworkNotice, AccountNetworkPicker, AccountNetworkSelector, AccountNotice, type AccountSettingsNetwork, type AccountSettingsProtocol, AccountSettingsRow, AccountSettingsShell, AccountStatusPills, type AccountStatusTabItem, AccountStatusTabs, type AccountStatusTabsProps, ActionTile, type ActionTileProps, ActivityDetailRow, type ActivityDetailRowProps, ActivityFilterBar, type ActivityFilterBarProps, ActivityList, type ActivityListItem, type ActivityListProps, type ActivityNetworkFilterOption, type ActivityNetworkFilterValue, ActivityNetworkFilters, type ActivityNetworkFiltersProps, ActivityRow, type ActivityRowProps, type ActivityStatusOption, type ActivityTypeTabCounts, type ActivityTypeTabValue, ActivityTypeTabs, AlertBanner, type AmountDisplayOptions, type AmountDisplayUnit, AppIcon, type AppIconName, type AppIconProps, ArkadeNetworkIcon, AssetCard, type AssetCardProps, AssetIcon, AssetSelector, type AssetSelectorCategory, type AssetSelectorOption, type AssetSelectorProps, BalanceBreakdown, type BalanceBreakdownAccounts, type BalanceBreakdownAsset, type BalanceBreakdownNodeInfo, type BalanceBreakdownProps, BottomNav, type BottomNavItem, type BottomNavProps, BottomSheet, type BottomSheetAction, type BottomSheetProps, BtcUnifiedReceive, type BtcUnifiedReceiveAddress, type BtcUnifiedReceiveProps, type BtcUnifiedReceiveResult, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CopyIcon, type DepositAccountId, DepositAssetSelection, type DepositAssetSelectionProps, type DepositGeneratedAsset, DepositGeneratedView, type DepositGeneratedViewProps, type DepositGenerationController, type DepositInvoiceAsset, DepositInvoiceGeneration, type DepositInvoiceGenerationProps, type DepositNetworkConfigEntry, DepositNetworkDefaultModal, type DepositNetworkDefaultModalProps, type DepositNetworkKey, type DepositNetworkOption, DepositPreGeneration, type DepositPreGenerationAsset, type DepositPreGenerationProps, type DepositSelectionAsset, DepositSuccessScreen, type DepositSuccessScreenProps, type DepositTransferMethod, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DisclosureCard, type DisclosureCardProps, DotPagination, type DotPaginationProps, type DotTone, ErrorBoundary, ErrorCard, type ErrorCardProps, ExpandIcon, ExtensionPageFrame, type ExtensionPageFrameProps, FadeOverlay, type FadeOverlayProps, FilterChipGroup, type FilterChipGroupProps, type FilterChipOption, FilterDropdown, type FilterDropdownOption, type FilterDropdownProps, HeadlineGradient, type HeadlineGradientProps, Icon, type IconName, type IconProps, Icons, InfoPanel, type InfoPanelProps, InlineAction, InlineSelector, type InlineSelectorOption, type InlineSelectorProps, Input, type InputProps, InvoiceStatusBanner, KaleidoScopeHeroAnimation, type KaleidoScopeHeroAnimationProps, Label, LightningNetworkIcon, LiquidNetworkIcon, ListSkeletonRows, type ListSkeletonRowsProps, LoadingCard, type LoadingCardProps, MethodChoiceChip, MetricCard, type MetricCardProps, MobileHeroAnimation, type MobileHeroAnimationProps, NETWORK_CONFIG, NetworkBadge, type NetworkBadgeProps, type NetworkIconProps, NetworkInfoDisclosure, NetworkStatusChip, type NetworkStatusChipProps, type NetworkType, NostrNetworkIcon, NumberInput, type NumberInputProps, OptionSelector, type OptionSelectorOption, type OptionSelectorProps, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, PaidOverlay, QrCode, type QrCodeProps, RecoveryPhraseCard, type RecoveryPhraseCardProps, RgbNetworkIcon, ScrollArea, type ScrollAreaProps, SecretRevealCard, type SecretRevealCardProps, SectionHeader, type SectionHeaderProps, SectionLabel, SectionTitle, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, SelectableCard, type SelectableCardProps, SettingItem, SettingsActionButton, SettingsSectionCard, type SettingsSectionCardProps, SettingsSelectorRow, type SettingsSelectorRowProps, SettingsStatusPanel, SettingsTile, type SettingsTileProps, Skeleton, type SkeletonProps, type SkeletonTone, SparkNetworkIcon, StatusBadge, StatusIconBadge, type StatusIconBadgeProps, type StatusType, StepperNumberInput, type StepperNumberInputProps, SwapInputCard, type SwapInputCardProps, Switch, SwitchRow, type SwitchRowProps, Tabs, TabsContent, TabsList, TabsTrigger, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, ToneBadge, type ToneBadgeProps, TransactionCard, type TransactionCardProps, TransferRouteCard, WalletAssetList, type WalletAssetListEmptyState, type WalletAssetListItem, type WalletAssetListProps, type WithdrawAddressType, WithdrawAmountInput, type WithdrawAmountInputProps, WithdrawConfirmation, type WithdrawConfirmationProps, type WithdrawConfirmationRgbInvoice, type WithdrawDecodedLnInvoice, type WithdrawDecodedRgbInvoice, WithdrawDestinationInput, type WithdrawDestinationInputProps, type WithdrawInvoiceAsset, WithdrawInvoiceInfo, type WithdrawInvoiceInfoLnInvoice, type WithdrawInvoiceInfoProps, type WithdrawInvoiceInfoRgbInvoice, type WithdrawLnurlPayData, type WithdrawRouteOption, WithdrawRouteSelector, type WithdrawRouteSelectorProps, type WithdrawRouteSummary, WithdrawSuccess, type WithdrawSuccessProps, buttonVariants, cn, formatDisplayAmountText, getAccountNetworkLabel, getAccountNetworkUi, getAccountStatusUi, getActivityNetworkFilterIcon, getAssetIconUrl, getFallbackAssetIconUrl, toast, useAssetIcon, useToast };
+export { AccountCapabilitiesCard, type AccountCapabilitiesCardProps, AccountChoiceChip, AccountHeaderIcons, AccountInfoGrid, AccountNetworkNotice, AccountNetworkPicker, AccountNetworkSelector, AccountNotice, type AccountSettingsNetwork, type AccountSettingsProtocol, AccountSettingsRow, AccountSettingsShell, AccountStatusPills, type AccountStatusTabItem, AccountStatusTabs, type AccountStatusTabsProps, ActionTile, type ActionTileProps, ActivityDetailRow, type ActivityDetailRowProps, ActivityFilterBar, type ActivityFilterBarProps, ActivityList, type ActivityListItem, type ActivityListProps, type ActivityNetworkFilterOption, type ActivityNetworkFilterValue, ActivityNetworkFilters, type ActivityNetworkFiltersProps, ActivityRow, type ActivityRowProps, type ActivityStatusOption, type ActivityTypeTabCounts, type ActivityTypeTabValue, ActivityTypeTabs, AlertBanner, type AmountDisplayOptions, type AmountDisplayUnit, AppIcon, type AppIconName, type AppIconProps, ArkadeNetworkIcon, AssetCard, type AssetCardProps, AssetIcon, AssetSelector, type AssetSelectorCategory, type AssetSelectorNetworkOption, type AssetSelectorOption, type AssetSelectorProps, type AssetSelectorQuickAsset, BalanceBreakdown, type BalanceBreakdownAccounts, type BalanceBreakdownAsset, type BalanceBreakdownNodeInfo, type BalanceBreakdownProps, BottomNav, type BottomNavItem, type BottomNavProps, BottomSheet, type BottomSheetAction, type BottomSheetProps, BtcUnifiedReceive, type BtcUnifiedReceiveAddress, type BtcUnifiedReceiveProps, type BtcUnifiedReceiveResult, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CopyIcon, type DepositAccountId, DepositAssetSelection, type DepositAssetSelectionProps, type DepositGeneratedAsset, DepositGeneratedView, type DepositGeneratedViewProps, type DepositGenerationController, type DepositInvoiceAsset, DepositInvoiceGeneration, type DepositInvoiceGenerationProps, type DepositNetworkConfigEntry, DepositNetworkDefaultModal, type DepositNetworkDefaultModalProps, type DepositNetworkKey, type DepositNetworkOption, DepositPreGeneration, type DepositPreGenerationAsset, type DepositPreGenerationProps, type DepositSelectionAsset, DepositSuccessScreen, type DepositSuccessScreenProps, type DepositTransferMethod, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DisclosureCard, type DisclosureCardProps, DotPagination, type DotPaginationProps, type DotTone, ErrorBoundary, ErrorCard, type ErrorCardProps, ExpandIcon, ExtensionPageFrame, type ExtensionPageFrameProps, FadeOverlay, type FadeOverlayProps, FilterChipGroup, type FilterChipGroupProps, type FilterChipOption, FilterDropdown, type FilterDropdownOption, type FilterDropdownProps, HeadlineGradient, type HeadlineGradientProps, Icon, type IconName, type IconProps, Icons, InfoPanel, type InfoPanelProps, InlineAction, InlineSelector, type InlineSelectorOption, type InlineSelectorProps, Input, type InputProps, InvoiceStatusBanner, KaleidoScopeHeroAnimation, type KaleidoScopeHeroAnimationProps, Label, LightningNetworkIcon, LiquidNetworkIcon, ListSkeletonRows, type ListSkeletonRowsProps, LoadingCard, type LoadingCardProps, MethodChoiceChip, MetricCard, type MetricCardProps, MobileHeroAnimation, type MobileHeroAnimationProps, NETWORK_CONFIG, NetworkBadge, type NetworkBadgeProps, type NetworkIconProps, NetworkInfoDisclosure, NetworkStatusChip, type NetworkStatusChipProps, type NetworkType, NostrNetworkIcon, NumberInput, type NumberInputProps, OptionSelector, type OptionSelectorOption, type OptionSelectorProps, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, PaidOverlay, QrCode, type QrCodeProps, RecoveryPhraseCard, type RecoveryPhraseCardProps, RgbNetworkIcon, ScrollArea, type ScrollAreaProps, SecretRevealCard, type SecretRevealCardProps, SectionHeader, type SectionHeaderProps, SectionLabel, SectionTitle, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, SelectableCard, type SelectableCardProps, SettingItem, SettingsActionButton, SettingsSectionCard, type SettingsSectionCardProps, SettingsSelectorRow, type SettingsSelectorRowProps, SettingsStatusPanel, SettingsTile, type SettingsTileProps, Skeleton, type SkeletonProps, type SkeletonTone, SparkNetworkIcon, StatusBadge, StatusIconBadge, type StatusIconBadgeProps, type StatusType, StepperNumberInput, type StepperNumberInputProps, SwapInputCard, type SwapInputCardProps, Switch, SwitchRow, type SwitchRowProps, Tabs, TabsContent, TabsList, TabsTrigger, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, ToneBadge, type ToneBadgeProps, TransactionCard, type TransactionCardProps, TransferRouteCard, WalletAssetList, type WalletAssetListEmptyState, type WalletAssetListItem, type WalletAssetListProps, type WithdrawAddressType, WithdrawAmountInput, type WithdrawAmountInputProps, WithdrawConfirmation, type WithdrawConfirmationProps, type WithdrawConfirmationRgbInvoice, type WithdrawDecodedLnInvoice, type WithdrawDecodedRgbInvoice, WithdrawDestinationInput, type WithdrawDestinationInputProps, type WithdrawInvoiceAsset, WithdrawInvoiceInfo, type WithdrawInvoiceInfoLnInvoice, type WithdrawInvoiceInfoProps, type WithdrawInvoiceInfoRgbInvoice, type WithdrawLnurlPayData, type WithdrawRouteOption, WithdrawRouteSelector, type WithdrawRouteSelectorProps, type WithdrawRouteSummary, WithdrawSuccess, type WithdrawSuccessProps, buttonVariants, cn, formatDisplayAmountText, getAccountNetworkLabel, getAccountNetworkUi, getAccountStatusUi, getActivityNetworkFilterIcon, getAssetIconUrl, getFallbackAssetIconUrl, toast, useAssetIcon, useToast };

package/dist/web/index.js

@@ -3618,6 +3618,42 @@ function readableTagColor(color) {
   const luminance = (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;
   return luminance < 0.45 ? `color-mix(in srgb, ${color} 45%, white)` : color;
 }
+var chipBaseClass = "shrink-0 rounded-full text-tiny font-bold uppercase tracking-wide shadow-inner transition-colors";
+var chipActiveClass = "bg-primary/[0.14] text-primary";
+var chipIdleClass = "bg-surface-card text-text-dimmed hover:text-white/75";
+function AssetSelectorNetworkMark({ network }) {
+  return network.iconUrl ? /* @__PURE__ */ jsx38("img", { src: network.iconUrl, alt: "", className: "size-4 shrink-0 rounded-full" }) : /* @__PURE__ */ jsx38("span", { className: "flex size-4 shrink-0 items-center justify-center rounded-full bg-muted text-xxs font-bold uppercase leading-none text-muted-foreground", children: network.label.charAt(0) });
+}
+function AssetSelectorNetworkFilterTrigger({
+  activeNetworkOption,
+  open,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxs25(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: cn(
+        chipBaseClass,
+        "flex items-center gap-1.5 py-1.5 pl-2 pr-2.5",
+        activeNetworkOption || open ? chipActiveClass : chipIdleClass
+      ),
+      children: [
+        activeNetworkOption && /* @__PURE__ */ jsx38(AssetSelectorNetworkMark, { network: activeNetworkOption }),
+        activeNetworkOption ? activeNetworkOption.label : "All",
+        /* @__PURE__ */ jsx38(
+          Icon,
+          {
+            name: "expand_more",
+            size: "xs",
+            className: cn("shrink-0 transition-transform duration-200", open && "rotate-180")
+          }
+        )
+      ]
+    }
+  );
+}
 function AssetSelector({
   label,
   selectedTicker,
@@ -3625,6 +3661,8 @@ function AssetSelector({
   options,
   categories = [],
   defaultActiveCategories,
+  networks = [],
+  quickAssets = [],
   networkFilter,
   venueFilter,
   disabled,
@@ -3639,16 +3677,25 @@ function AssetSelector({
   const [activeCategories, setActiveCategories] = useState11(
     defaultActiveCategories ?? categories.map((category) => category.id)
   );
+  const [activeNetwork, setActiveNetwork] = useState11(null);
+  const [networkMenuOpen, setNetworkMenuOpen] = useState11(false);
+  const [activeQuickAsset, setActiveQuickAsset] = useState11(null);
   const selectedKey = selectedId ?? selectedTicker;
   const selected = options.find((option) => option.id === selectedKey) ?? options.find((option) => option.ticker === selectedTicker);
   const selectedOptionId = selected?.id ?? selectedKey;
   const hasCategoryFilters = categories.length > 0;
+  const hasNetworkFilter = networks.length > 0;
+  const hasQuickAssets = quickAssets.length > 0;
+  const activeNetworkOption = networks.find((network) => network.id === activeNetwork) ?? null;
   const filtered = options.filter((option) => {
     const category = option.category ?? null;
     const matchesCategory = !hasCategoryFilters || category === null || activeCategories.includes(category);
     const matchesNetwork = !networkFilter || option.network === networkFilter;
+    const matchesNetworkFilter = !activeNetwork || option.networkId == null || option.networkId === activeNetwork;
+    const matchesQuickAsset = !activeQuickAsset || option.ticker.toUpperCase() === activeQuickAsset;
     const matchesVenue = !venueFilter || option.venue === venueFilter;
-    if (!matchesCategory || !matchesNetwork || !matchesVenue) return false;
+    if (!matchesCategory || !matchesNetwork || !matchesNetworkFilter || !matchesQuickAsset || !matchesVenue)
+      return false;
     if (!search) return true;
     const searchValue = search.toLowerCase();
     const matchesSearch = option.ticker.toLowerCase().includes(searchValue) || (option.name?.toLowerCase().includes(searchValue) ?? false) || (option.assetId?.toLowerCase().includes(searchValue) ?? false) || (option.network?.toLowerCase().includes(searchValue) ?? false) || (option.networkTag?.label.toLowerCase().includes(searchValue) ?? false) || (option.category?.toLowerCase().includes(searchValue) ?? false);
@@ -3665,6 +3712,117 @@ function AssetSelector({
     disabled: option.id === disabledId || option.ticker === disabledTicker
   }));
   const categoryLabelById = new Map(categories.map((category) => [category.id, category.label]));
+  const networkFilterButton = hasNetworkFilter && /* @__PURE__ */ jsxs25("div", { className: "relative shrink-0", children: [
+    /* @__PURE__ */ jsx38(
+      AssetSelectorNetworkFilterTrigger,
+      {
+        activeNetworkOption,
+        open: networkMenuOpen,
+        onClick: () => setNetworkMenuOpen((value) => !value)
+      }
+    ),
+    networkMenuOpen && /* @__PURE__ */ jsx38("div", { className: "absolute right-0 top-full z-10 mt-1.5 w-48 overflow-hidden rounded-xl border border-white/[0.08] bg-popover shadow-popover", children: /* @__PURE__ */ jsxs25("div", { className: "max-h-60 overflow-y-auto p-1", children: [
+      /* @__PURE__ */ jsxs25(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setActiveNetwork(null);
+            setNetworkMenuOpen(false);
+          },
+          className: cn(
+            "flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-xs font-semibold transition-colors",
+            activeNetwork === null ? "bg-primary/[0.14] text-primary" : "text-white/75 hover:bg-accent hover:text-white"
+          ),
+          children: [
+            /* @__PURE__ */ jsx38(Icon, { name: "hub", size: "xs", className: "shrink-0" }),
+            /* @__PURE__ */ jsx38("span", { className: "min-w-0 flex-1 truncate text-left", children: "All networks" }),
+            activeNetwork === null && /* @__PURE__ */ jsx38(Icon, { name: "check", size: "xs", className: "shrink-0 text-primary" })
+          ]
+        }
+      ),
+      networks.map((network) => {
+        const isActive = activeNetwork === network.id;
+        return /* @__PURE__ */ jsxs25(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              setActiveNetwork(network.id);
+              setNetworkMenuOpen(false);
+            },
+            className: cn(
+              "flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-xs font-semibold transition-colors",
+              isActive ? "bg-primary/[0.14] text-primary" : "text-white/75 hover:bg-accent hover:text-white"
+            ),
+            children: [
+              /* @__PURE__ */ jsx38(AssetSelectorNetworkMark, { network }),
+              /* @__PURE__ */ jsx38("span", { className: "min-w-0 flex-1 truncate text-left", children: network.label }),
+              isActive && /* @__PURE__ */ jsx38(Icon, { name: "check", size: "xs", className: "shrink-0 text-primary" })
+            ]
+          },
+          network.id
+        );
+      })
+    ] }) })
+  ] });
+  const filterControls = (hasQuickAssets || hasCategoryFilters) && /* @__PURE__ */ jsxs25(Fragment6, { children: [
+    hasQuickAssets && /* @__PURE__ */ jsx38("div", { className: "mt-3 flex flex-wrap items-center gap-1.5", children: quickAssets.map((quick) => {
+      const tickerKey = quick.ticker.toUpperCase();
+      const isActive = activeQuickAsset === tickerKey;
+      return /* @__PURE__ */ jsxs25(
+        "button",
+        {
+          type: "button",
+          onClick: () => setActiveQuickAsset(isActive ? null : tickerKey),
+          className: cn(
+            chipBaseClass,
+            "flex items-center gap-1.5 py-1 pl-1.5 pr-2.5",
+            isActive ? chipActiveClass : chipIdleClass
+          ),
+          children: [
+            quick.iconUrl ? /* @__PURE__ */ jsx38("img", { src: quick.iconUrl, alt: "", className: "size-4 shrink-0 rounded-full" }) : /* @__PURE__ */ jsx38(AssetIcon, { ticker: quick.ticker, size: 16, className: "shrink-0" }),
+            quick.ticker
+          ]
+        },
+        tickerKey
+      );
+    }) }),
+    hasCategoryFilters && /* @__PURE__ */ jsxs25("div", { className: "mt-3 flex flex-wrap items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx38(
+        "button",
+        {
+          type: "button",
+          onClick: () => setActiveCategories(categories.map((category) => category.id)),
+          className: cn(
+            chipBaseClass,
+            "px-2.5 py-1",
+            activeCategories.length === categories.length ? chipActiveClass : chipIdleClass
+          ),
+          children: "All"
+        }
+      ),
+      categories.map((category) => {
+        const isActive = activeCategories.includes(category.id);
+        return /* @__PURE__ */ jsx38(
+          "button",
+          {
+            type: "button",
+            onClick: () => setActiveCategories(
+              (current) => current.includes(category.id) ? current.filter((value) => value !== category.id) : [...current, category.id]
+            ),
+            className: cn(
+              chipBaseClass,
+              "px-2.5 py-1",
+              isActive ? chipActiveClass : chipIdleClass
+            ),
+            children: category.label
+          },
+          category.id
+        );
+      })
+    ] })
+  ] });
   const renderAssetOption = (option, optionSelected, optionDisabled) => {
     const optionCategoryLabel = option.categoryLabel || (option.category ? categoryLabelById.get(option.category) : void 0);
     const hasNetworkBadge = Boolean(option.networkIconUrl || option.networkTag);
@@ -3733,6 +3891,7 @@ function AssetSelector({
     const closePanel = () => {
       setOpen(false);
       setSearch("");
+      setNetworkMenuOpen(false);
     };
     return /* @__PURE__ */ jsxs25("div", { className: "relative w-36 flex-shrink-0", children: [
       /* @__PURE__ */ jsx38(
@@ -3792,7 +3951,7 @@ function AssetSelector({
                         " available"
                       ] })
                     ] }),
-                    selected && /* @__PURE__ */ jsxs25("div", { className: "flex items-center gap-2 rounded-full bg-white/5 px-2.5 py-1", children: [
+                    networkFilterButton || selected && /* @__PURE__ */ jsxs25("div", { className: "flex items-center gap-2 rounded-full bg-white/5 px-2.5 py-1", children: [
                       /* @__PURE__ */ jsx38(AssetIcon, { ticker: selected.ticker, logoUri: selected.icon, size: 18 }),
                       /* @__PURE__ */ jsx38("span", { className: "text-tiny font-semibold text-white", children: selected.ticker })
                     ] })
@@ -3819,38 +3978,7 @@ function AssetSelector({
                         }
                       )
                     ] }),
-                    hasCategoryFilters && /* @__PURE__ */ jsxs25("div", { className: "mt-3 flex flex-wrap items-center gap-1.5", children: [
-                      /* @__PURE__ */ jsx38(
-                        "button",
-                        {
-                          type: "button",
-                          onClick: () => setActiveCategories(categories.map((category) => category.id)),
-                          className: cn(
-                            "rounded-full px-2.5 py-1 text-tiny font-bold uppercase tracking-wide shadow-inner transition-colors",
-                            activeCategories.length === categories.length ? "bg-primary/[0.14] text-primary" : "bg-surface-card text-text-dimmed hover:text-white/75"
-                          ),
-                          children: "All"
-                        }
-                      ),
-                      categories.map((category) => {
-                        const isActive = activeCategories.includes(category.id);
-                        return /* @__PURE__ */ jsx38(
-                          "button",
-                          {
-                            type: "button",
-                            onClick: () => setActiveCategories(
-                              (current) => current.includes(category.id) ? current.filter((value) => value !== category.id) : [...current, category.id]
-                            ),
-                            className: cn(
-                              "rounded-full px-2.5 py-1 text-tiny font-bold uppercase tracking-wide shadow-inner transition-colors",
-                              isActive ? "bg-primary/[0.14] text-primary" : "bg-surface-card text-text-dimmed hover:text-white/75"
-                            ),
-                            children: category.label
-                          },
-                          category.id
-                        );
-                      })
-                    ] })
+                    filterControls
                   ] }),
                   /* @__PURE__ */ jsx38("div", { className: "mx-4 h-px bg-white/[0.06]" }),
                   /* @__PURE__ */ jsx38(ScrollArea, { className: "min-h-0 flex-1", viewportClassName: "max-h-[56vh] px-2 py-2 pb-6", children: filtered.length === 0 ? /* @__PURE__ */ jsxs25("div", { className: "flex flex-col items-center gap-2 px-4 py-10 text-center text-sm text-white/30", children: [
@@ -3943,7 +4071,7 @@ function AssetSelector({
               " available"
             ] })
           ] }),
-          selected && /* @__PURE__ */ jsxs25("div", { className: "flex items-center gap-2 rounded-full bg-white/5 px-2.5 py-1", children: [
+          networkFilterButton || selected && /* @__PURE__ */ jsxs25("div", { className: "flex items-center gap-2 rounded-full bg-white/5 px-2.5 py-1", children: [
             /* @__PURE__ */ jsx38(AssetIcon, { ticker: selected.ticker, logoUri: selected.icon, size: 18 }),
             /* @__PURE__ */ jsx38("span", { className: "text-tiny font-semibold text-white", children: selected.ticker })
           ] })
@@ -3970,38 +4098,7 @@ function AssetSelector({
               }
             )
           ] }),
-          hasCategoryFilters && /* @__PURE__ */ jsxs25("div", { className: "mt-3 flex flex-wrap items-center gap-1.5", children: [
-            /* @__PURE__ */ jsx38(
-              "button",
-              {
-                type: "button",
-                onClick: () => setActiveCategories(categories.map((category) => category.id)),
-                className: cn(
-                  "rounded-full px-2.5 py-1 text-tiny font-bold uppercase tracking-wide shadow-inner transition-colors",
-                  activeCategories.length === categories.length ? "bg-primary/[0.14] text-primary" : "bg-surface-card text-text-dimmed hover:text-white/75"
-                ),
-                children: "All"
-              }
-            ),
-            categories.map((category) => {
-              const isActive = activeCategories.includes(category.id);
-              return /* @__PURE__ */ jsx38(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => setActiveCategories(
-                    (current) => current.includes(category.id) ? current.filter((value) => value !== category.id) : [...current, category.id]
-                  ),
-                  className: cn(
-                    "rounded-full px-2.5 py-1 text-tiny font-bold uppercase tracking-wide shadow-inner transition-colors",
-                    isActive ? "bg-primary/[0.14] text-primary" : "bg-surface-card text-text-dimmed hover:text-white/75"
-                  ),
-                  children: category.label
-                },
-                category.id
-              );
-            })
-          ] })
+          filterControls
         ] })
       ] }),
       renderOption: ({ option, selected: optionSelected, disabled: optionDisabled }) => {
@@ -4024,6 +4121,8 @@ function SwapInputCard({
   toOptions,
   categories,
   defaultActiveCategories,
+  fromNetworks,
+  fromQuickAssets,
   availableText,
   showMaxText = false,
   maxText,
@@ -4101,6 +4200,8 @@ function SwapInputCard({
               options: fromOptions,
               categories,
               defaultActiveCategories,
+              networks: fromNetworks,
+              quickAssets: fromQuickAssets,
               disabledId: toSelectedId,
               onChange: onFromTickerChange
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kaleido-ui",
-  "version": "0.1.105",
+  "version": "0.1.107",
   "description": "KaleidoSwap shared UI library — design tokens, web components (Tailwind + Radix), and React Native components extending WDK UI Kit",
   "license": "MIT",
   "type": "module",
@@ -43,6 +43,7 @@
     "showcase": "vite --config showcase/vite.config.ts",
     "showcase:build": "npm run generate:css && vite build --config showcase/vite.config.ts",
     "type-check": "tsc --noEmit",
+    "test": "node --import tsx --test tests/*.test.tsx",
     "clean": "rm -rf dist"
   },
   "dependencies": {