kaleido-ui 0.1.87 → 0.1.89

package/dist/web/index.cjs

@@ -104,6 +104,7 @@ __export(web_exports, {
   KaleidoScopeHeroAnimation: () => KaleidoScopeHeroAnimation,
   Label: () => Label2,
   LightningNetworkIcon: () => LightningNetworkIcon,
+  LiquidNetworkIcon: () => LiquidNetworkIcon,
   ListSkeletonRows: () => ListSkeletonRows,
   LoadingCard: () => LoadingCard,
   MethodChoiceChip: () => MethodChoiceChip,
@@ -2214,6 +2215,9 @@ function NostrNetworkIcon({
 function RgbNetworkIcon({ className = "size-3.5", alt = "RGB" }) {
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("img", { src: protocolIcons["RGB20"], alt, className: cn("object-contain", className) });
 }
+function LiquidNetworkIcon({ className = "size-3.5", alt = "Liquid" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("img", { src: protocolIcons.Liquid, alt, className: cn("object-contain", className) });
+}
 
 // src/web/components/action-tile.tsx
 var import_jsx_runtime26 = require("react/jsx-runtime");
@@ -3386,6 +3390,7 @@ function BalanceBreakdown({
   btcLightning,
   btcSpark,
   btcArkade,
+  btcLiquid = 0,
   totalBTC,
   rgbAssets,
   accounts,
@@ -3402,6 +3407,7 @@ function BalanceBreakdown({
   btcLightningPending = false,
   btcSparkPending = false,
   btcArkadePending = false,
+  btcLiquidPending = false,
   onRefresh,
   isRefreshing = false,
   onNavigate,
@@ -3571,6 +3577,21 @@ function BalanceBreakdown({
                   formatFiat: formatFiatValue
                 }
               ),
+              (btcLiquid > 0 || btcLiquidPending) && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                NetworkRow,
+                {
+                  icon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(LiquidNetworkIcon, { className: "size-3.5" }),
+                  iconColor: "",
+                  dotColor: "bg-network-liquid",
+                  label: "BTC on Liquid",
+                  sublabel: "Liquid L-BTC balance",
+                  amount: btcLiquid,
+                  isPending: btcLiquidPending,
+                  visible: balanceVisible,
+                  format,
+                  formatFiat: formatFiatValue
+                }
+              ),
               rgbAssets.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(RgbAssetsBreakdown, { assets: rgbAssets, balanceVisible }),
               tokenValueSats !== void 0 && tokenValueSats > 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "mt-4 pt-1", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "mb-3 text-xxs font-bold uppercase tracking-widest text-white/30", children: "Token Holdings" }),
@@ -3749,6 +3770,16 @@ var import_jsx_runtime38 = require("react/jsx-runtime");
 function NetworkMiniBadge({ iconUrl, label }) {
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: cn(iconBadgeOverlayClass, "overflow-hidden"), children: iconUrl ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("img", { src: iconUrl, alt: label ?? "", className: "h-full w-full object-cover" }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "flex h-full w-full items-center justify-center bg-muted text-xxs font-bold uppercase leading-none text-muted-foreground", children: label?.charAt(0) }) });
 }
+function readableTagColor(color) {
+  const raw = color.replace("#", "");
+  const hex = raw.length === 3 ? raw.split("").map((char) => char + char).join("") : raw;
+  if (!/^[0-9a-fA-F]{6}$/.test(hex)) return color;
+  const r = parseInt(hex.slice(0, 2), 16);
+  const g = parseInt(hex.slice(2, 4), 16);
+  const b = parseInt(hex.slice(4, 6), 16);
+  const luminance = (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;
+  return luminance < 0.45 ? `color-mix(in srgb, ${color} 45%, white)` : color;
+}
 function AssetSelector({
   label,
   selectedTicker,
@@ -3840,7 +3871,7 @@ function AssetSelector({
               ),
               style: option.networkTag.color ? {
                 backgroundColor: `color-mix(in srgb, ${option.networkTag.color} 15%, transparent)`,
-                color: option.networkTag.color
+                color: readableTagColor(option.networkTag.color)
               } : void 0,
               children: option.networkTag.label
             }
@@ -4877,7 +4908,7 @@ function WithdrawAmountInput({
   const customFeeEnabled = typeof setFeeRateMode === "function";
   const activeFeeMode = feeRateMode ?? feeRate;
   const unitLabel = selectedAssetId === "BTC" ? "sats" : selectedAssetTicker ?? "units";
-  const showAmountInput = addressType === "bitcoin" || addressType === "spark" || addressType === "arkade" || addressType === "lightning-address" || addressType === "lnurl-pay" || addressType === "rgb" && !decodedRgbInvoice?.assignment?.value || addressType === "lightning" && !decodedLnInvoice?.amount && !decodedLnInvoice?.asset_amount;
+  const showAmountInput = addressType === "bitcoin" || addressType === "spark" || addressType === "arkade" || addressType === "liquid" || addressType === "lightning-address" || addressType === "lnurl-pay" || addressType === "rgb" && !decodedRgbInvoice?.assignment?.value || addressType === "lightning" && !decodedLnInvoice?.amount && !decodedLnInvoice?.asset_amount;
   const enteredNum = parseFloat(amount.replace(/[^\d.-]/g, "") || "0") || 0;
   const balanceNum = parseFloat(formattedBalance.replace(/,/g, "") || "0") || 0;
   const isOverBalance = enteredNum > 0 && balanceNum > 0 && enteredNum > balanceNum;
@@ -5146,9 +5177,9 @@ function WithdrawInvoiceInfo({
       ] })
     ] });
   }
-  if (addressType === "bitcoin" || addressType === "arkade") {
+  if (addressType === "bitcoin" || addressType === "arkade" || addressType === "liquid") {
     return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "rounded-2xl bg-card p-5 shadow-inner", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex justify-between text-sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "text-muted-foreground", children: addressType === "arkade" ? "Available Arkade Balance" : "Available Balance" }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "text-muted-foreground", children: addressType === "arkade" ? "Available Arkade Balance" : addressType === "liquid" ? "Available Liquid Balance" : "Available Balance" }),
       /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("span", { className: "font-bold text-white", children: [
         formatRawAmount(assetBalance, getAssetPrecisionForId(allAssets, selectedAssetId)),
         " ",
@@ -7480,6 +7511,13 @@ var ACCOUNT_META = {
     accentText: "text-network-arkade",
     accentBorder: "border-network-arkade/30",
     icon: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("img", { src: "/icons/arkade/arkade-icon.svg", alt: "", className: "h-2.5 w-2.5 rounded-[1px] object-contain" })
+  },
+  LIQUID: {
+    shortLabel: "Liquid",
+    accentBg: "bg-network-liquid/10",
+    accentText: "text-network-liquid",
+    accentBorder: "border-network-liquid/30",
+    icon: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(LiquidNetworkIcon, { className: "h-2.5 w-2.5" })
   }
 };
 var METHOD_META = {
@@ -7750,6 +7788,18 @@ var NETWORK_OPTIONS = {
     accentBg: "bg-network-arkade/10",
     accentBorder: "border-network-arkade/30",
     accentText: "text-network-arkade"
+  },
+  LIQUID: {
+    // Liquid is its own chain; reuse the "onchain" network key for the modal's
+    // network callback (there's no dedicated Liquid DepositNetworkKey).
+    network: "onchain",
+    account: "LIQUID",
+    label: "Liquid",
+    description: "Receive L-BTC or a Liquid asset (USDt) via a confidential Liquid address.",
+    icon: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(LiquidNetworkIcon, { className: "h-[18px] w-[18px]" }),
+    accentBg: "bg-network-liquid/10",
+    accentBorder: "border-network-liquid/30",
+    accentText: "text-network-liquid"
   }
 };
 function DepositNetworkDefaultModal({
@@ -8210,7 +8260,8 @@ var import_jsx_runtime80 = require("react/jsx-runtime");
 var ACCOUNT_TITLES = {
   RGB: "RGB & Lightning",
   SPARK: "Spark",
-  ARKADE: "Arkade"
+  ARKADE: "Arkade",
+  LIQUID: "Liquid"
 };
 var METHOD_META2 = {
   bitcoin_l1: { label: "Bitcoin address", summary: "Standard on-chain BTC transfer." },
@@ -8407,12 +8458,14 @@ var import_jsx_runtime81 = require("react/jsx-runtime");
 var ADD_ASSET_SUBTITLE = {
   RGB: "RGB asset on Bitcoin",
   SPARK: "Spark-native asset",
-  ARKADE: "Arkade-native asset"
+  ARKADE: "Arkade-native asset",
+  LIQUID: "L-BTC or Liquid asset"
 };
 var PROTOCOL_BADGE = {
   RGB: { label: "RGB", className: "bg-network-rgb-chip text-network-rgb-text" },
   SPARK: { label: "Spark", className: "bg-network-spark-chip text-network-spark-text" },
-  ARKADE: { label: "Arkade", className: "bg-network-arkade-chip text-network-arkade-text" }
+  ARKADE: { label: "Arkade", className: "bg-network-arkade-chip text-network-arkade-text" },
+  LIQUID: { label: "Liquid", className: "bg-network-liquid-chip text-network-liquid-text" }
 };
 function formatAssetBalance(asset) {
   const raw = asset.balance ?? 0;
@@ -8438,7 +8491,8 @@ function DepositAssetSelection({
   handleContinueToGenerate,
   isRgbConnected,
   isSparkConnected,
-  isArkadeConnected
+  isArkadeConnected,
+  isLiquidConnected = false
 }) {
   const btcAsset = filteredAssets.find((asset) => asset.ticker === "BTC");
   const ownedAssets = filteredAssets.filter((asset) => asset.ticker !== "BTC").slice().sort((a, b) => (b.balance ?? 0) - (a.balance ?? 0));
@@ -8478,6 +8532,15 @@ function DepositAssetSelection({
       idleClass: "bg-network-arkade/10 hover:bg-network-arkade/20",
       activeClass: "bg-network-arkade/25",
       titleHoverClass: "group-hover:text-network-arkade"
+    },
+    {
+      account: "LIQUID",
+      title: "New Liquid Asset",
+      ticker: "LIQUID",
+      enabled: isLiquidConnected,
+      idleClass: "bg-network-liquid/10 hover:bg-network-liquid/20",
+      activeClass: "bg-network-liquid/25",
+      titleHoverClass: "group-hover:text-network-liquid"
     }
   ].filter((option) => option.enabled);
   return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "relative flex h-screen flex-col overflow-hidden bg-background pt-16 font-display text-foreground", children: [
@@ -8668,7 +8731,7 @@ function DepositAssetSelection({
               handleAddNewAsset(option.account);
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(AssetIcon, { ticker: option.ticker, size: 36, className: "flex-shrink-0" }),
+              option.account === "LIQUID" ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: "flex size-9 shrink-0 items-center justify-center rounded-full bg-network-liquid/10", children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(LiquidNetworkIcon, { className: "size-5" }) }) : /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(AssetIcon, { ticker: option.ticker, size: 36, className: "flex-shrink-0" }),
               /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "min-w-0 flex-1", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: cn("text-sm font-bold tracking-wide text-white", option.titleHoverClass), children: option.title }),
                 /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "mt-0.5 text-xxs text-white/40", children: ADD_ASSET_SUBTITLE[option.account] })
@@ -8688,7 +8751,8 @@ var import_jsx_runtime82 = require("react/jsx-runtime");
 var ACCOUNT_TITLES2 = {
   RGB: "RGB & Lightning",
   SPARK: "Spark",
-  ARKADE: "Arkade"
+  ARKADE: "Arkade",
+  LIQUID: "Liquid"
 };
 function getAssetFamily(assetId, ticker) {
   if (assetId === "BTC") return "BTC";
@@ -8789,7 +8853,10 @@ function DepositInvoiceGeneration({
   const routeAccounts = {
     RGB: isRgbConnected,
     SPARK: isSparkConnected,
-    ARKADE: isArkadeConnected
+    ARKADE: isArkadeConnected,
+    // Liquid isn't offered by kaleido-ui's own DepositInvoiceGeneration; the
+    // KaleidoSwap extension uses its own component for the Liquid receive path.
+    LIQUID: false
   };
   const availableAccounts = resolveReceiveAccounts({ assetFamily, accounts: routeAccounts });
   const methodOptions = resolveReceiveMethodOptions({
@@ -9080,6 +9147,7 @@ function DepositInvoiceGeneration({
   KaleidoScopeHeroAnimation,
   Label,
   LightningNetworkIcon,
+  LiquidNetworkIcon,
   ListSkeletonRows,
   LoadingCard,
   MethodChoiceChip,

package/dist/web/index.d.cts

@@ -339,6 +339,12 @@ declare function NostrNetworkIcon({ className, alt, }: NetworkIconProps): react_
  * so consumers get the canonical logo without serving their own copy.
  */
 declare function RgbNetworkIcon({ className, alt }: NetworkIconProps): react_jsx_runtime.JSX.Element;
+/**
+ * Liquid Network mark. Like RgbNetworkIcon, renders the canonical Liquid logo
+ * bundled with the library (protocolIcons), so every surface shows the official
+ * mark rather than a placeholder — matching the extension's LiquidIcon.
+ */
+declare function LiquidNetworkIcon({ className, alt }: NetworkIconProps): react_jsx_runtime.JSX.Element;
 
 interface ActionTileProps {
     icon: ReactNode;
@@ -666,6 +672,8 @@ interface BalanceBreakdownProps {
     btcLightning: number;
     btcSpark: number;
     btcArkade: number;
+    /** L-BTC — BTC on the Liquid Network. Row shown only when > 0 or pending. */
+    btcLiquid?: number;
     totalBTC: number;
     rgbAssets: BalanceBreakdownAsset[];
     accounts: BalanceBreakdownAccounts;
@@ -682,6 +690,7 @@ interface BalanceBreakdownProps {
     btcLightningPending?: boolean;
     btcSparkPending?: boolean;
     btcArkadePending?: boolean;
+    btcLiquidPending?: boolean;
     onRefresh?: () => void;
     isRefreshing?: boolean;
     onNavigate?: (view: 'deposit' | 'swap' | 'withdraw') => void;
@@ -694,7 +703,7 @@ interface BalanceBreakdownProps {
      */
     tokenValueSats?: number;
 }
-declare function BalanceBreakdown({ btcOnchain, btcLightning, btcSpark, btcArkade, totalBTC, rgbAssets, accounts, nodeInfo, balanceVisible, format, formatFiatValue, unit, label, cycle, isLoading, isPartial, btcOnchainPending, btcLightningPending, btcSparkPending, btcArkadePending, onRefresh, isRefreshing, onNavigate, compact, tokenValueSats, }: BalanceBreakdownProps): react_jsx_runtime.JSX.Element;
+declare function BalanceBreakdown({ btcOnchain, btcLightning, btcSpark, btcArkade, btcLiquid, totalBTC, rgbAssets, accounts, nodeInfo, balanceVisible, format, formatFiatValue, unit, label, cycle, isLoading, isPartial, btcOnchainPending, btcLightningPending, btcSparkPending, btcArkadePending, btcLiquidPending, onRefresh, isRefreshing, onNavigate, compact, tokenValueSats, }: BalanceBreakdownProps): react_jsx_runtime.JSX.Element;
 
 interface AssetSelectorOption {
     id: string;
@@ -868,7 +877,7 @@ interface ActivityDetailRowProps {
 }
 declare function ActivityDetailRow({ label, value, fullValue, onCopy, isCopied, }: ActivityDetailRowProps): react_jsx_runtime.JSX.Element;
 
-type WithdrawAddressType = 'unknown' | 'bitcoin' | 'spark' | 'arkade' | 'lightning' | 'lightning-address' | 'lnurl-pay' | 'rgb' | 'invalid';
+type WithdrawAddressType = 'unknown' | 'bitcoin' | 'spark' | 'arkade' | 'liquid' | 'lightning' | 'lightning-address' | 'lnurl-pay' | 'rgb' | 'invalid';
 interface WithdrawDestinationInputProps {
     destination: string;
     setDestination: (value: string) => void;
@@ -1412,7 +1421,7 @@ interface KaleidoScopeHeroAnimationProps {
 }
 declare const KaleidoScopeHeroAnimation: FC<KaleidoScopeHeroAnimationProps>;
 
-type DepositAccountId = 'RGB' | 'SPARK' | 'ARKADE';
+type DepositAccountId = 'RGB' | 'SPARK' | 'ARKADE' | 'LIQUID';
 type DepositTransferMethod = 'bitcoin_l1' | 'lightning' | 'spark' | 'arkade' | 'boarding' | 'submarine_swap';
 type DepositNetworkKey = 'onchain' | 'lightning' | 'spark' | 'arkade';
 interface DepositNetworkConfigEntry {
@@ -1674,8 +1683,9 @@ interface DepositAssetSelectionProps<TView extends string = string> {
     isRgbConnected: boolean;
     isSparkConnected: boolean;
     isArkadeConnected: boolean;
+    isLiquidConnected?: boolean;
 }
-declare function DepositAssetSelection<TView extends string = string>({ setCurrentView, isNewAsset, newAssetAccount, newAssetId, setNewAssetId, searchQuery, setSearchQuery, filteredAssets, onSelectAsset, handleAddNewAsset, handleContinueToGenerate, isRgbConnected, isSparkConnected, isArkadeConnected, }: DepositAssetSelectionProps<TView>): react_jsx_runtime.JSX.Element;
+declare function DepositAssetSelection<TView extends string = string>({ setCurrentView, isNewAsset, newAssetAccount, newAssetId, setNewAssetId, searchQuery, setSearchQuery, filteredAssets, onSelectAsset, handleAddNewAsset, handleContinueToGenerate, isRgbConnected, isSparkConnected, isArkadeConnected, isLiquidConnected, }: DepositAssetSelectionProps<TView>): react_jsx_runtime.JSX.Element;
 
 interface DepositInvoiceAsset {
     asset_id?: string;
@@ -1783,4 +1793,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, 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 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 };

package/dist/web/index.d.ts

@@ -339,6 +339,12 @@ declare function NostrNetworkIcon({ className, alt, }: NetworkIconProps): react_
  * so consumers get the canonical logo without serving their own copy.
  */
 declare function RgbNetworkIcon({ className, alt }: NetworkIconProps): react_jsx_runtime.JSX.Element;
+/**
+ * Liquid Network mark. Like RgbNetworkIcon, renders the canonical Liquid logo
+ * bundled with the library (protocolIcons), so every surface shows the official
+ * mark rather than a placeholder — matching the extension's LiquidIcon.
+ */
+declare function LiquidNetworkIcon({ className, alt }: NetworkIconProps): react_jsx_runtime.JSX.Element;
 
 interface ActionTileProps {
     icon: ReactNode;
@@ -666,6 +672,8 @@ interface BalanceBreakdownProps {
     btcLightning: number;
     btcSpark: number;
     btcArkade: number;
+    /** L-BTC — BTC on the Liquid Network. Row shown only when > 0 or pending. */
+    btcLiquid?: number;
     totalBTC: number;
     rgbAssets: BalanceBreakdownAsset[];
     accounts: BalanceBreakdownAccounts;
@@ -682,6 +690,7 @@ interface BalanceBreakdownProps {
     btcLightningPending?: boolean;
     btcSparkPending?: boolean;
     btcArkadePending?: boolean;
+    btcLiquidPending?: boolean;
     onRefresh?: () => void;
     isRefreshing?: boolean;
     onNavigate?: (view: 'deposit' | 'swap' | 'withdraw') => void;
@@ -694,7 +703,7 @@ interface BalanceBreakdownProps {
      */
     tokenValueSats?: number;
 }
-declare function BalanceBreakdown({ btcOnchain, btcLightning, btcSpark, btcArkade, totalBTC, rgbAssets, accounts, nodeInfo, balanceVisible, format, formatFiatValue, unit, label, cycle, isLoading, isPartial, btcOnchainPending, btcLightningPending, btcSparkPending, btcArkadePending, onRefresh, isRefreshing, onNavigate, compact, tokenValueSats, }: BalanceBreakdownProps): react_jsx_runtime.JSX.Element;
+declare function BalanceBreakdown({ btcOnchain, btcLightning, btcSpark, btcArkade, btcLiquid, totalBTC, rgbAssets, accounts, nodeInfo, balanceVisible, format, formatFiatValue, unit, label, cycle, isLoading, isPartial, btcOnchainPending, btcLightningPending, btcSparkPending, btcArkadePending, btcLiquidPending, onRefresh, isRefreshing, onNavigate, compact, tokenValueSats, }: BalanceBreakdownProps): react_jsx_runtime.JSX.Element;
 
 interface AssetSelectorOption {
     id: string;
@@ -868,7 +877,7 @@ interface ActivityDetailRowProps {
 }
 declare function ActivityDetailRow({ label, value, fullValue, onCopy, isCopied, }: ActivityDetailRowProps): react_jsx_runtime.JSX.Element;
 
-type WithdrawAddressType = 'unknown' | 'bitcoin' | 'spark' | 'arkade' | 'lightning' | 'lightning-address' | 'lnurl-pay' | 'rgb' | 'invalid';
+type WithdrawAddressType = 'unknown' | 'bitcoin' | 'spark' | 'arkade' | 'liquid' | 'lightning' | 'lightning-address' | 'lnurl-pay' | 'rgb' | 'invalid';
 interface WithdrawDestinationInputProps {
     destination: string;
     setDestination: (value: string) => void;
@@ -1412,7 +1421,7 @@ interface KaleidoScopeHeroAnimationProps {
 }
 declare const KaleidoScopeHeroAnimation: FC<KaleidoScopeHeroAnimationProps>;
 
-type DepositAccountId = 'RGB' | 'SPARK' | 'ARKADE';
+type DepositAccountId = 'RGB' | 'SPARK' | 'ARKADE' | 'LIQUID';
 type DepositTransferMethod = 'bitcoin_l1' | 'lightning' | 'spark' | 'arkade' | 'boarding' | 'submarine_swap';
 type DepositNetworkKey = 'onchain' | 'lightning' | 'spark' | 'arkade';
 interface DepositNetworkConfigEntry {
@@ -1674,8 +1683,9 @@ interface DepositAssetSelectionProps<TView extends string = string> {
     isRgbConnected: boolean;
     isSparkConnected: boolean;
     isArkadeConnected: boolean;
+    isLiquidConnected?: boolean;
 }
-declare function DepositAssetSelection<TView extends string = string>({ setCurrentView, isNewAsset, newAssetAccount, newAssetId, setNewAssetId, searchQuery, setSearchQuery, filteredAssets, onSelectAsset, handleAddNewAsset, handleContinueToGenerate, isRgbConnected, isSparkConnected, isArkadeConnected, }: DepositAssetSelectionProps<TView>): react_jsx_runtime.JSX.Element;
+declare function DepositAssetSelection<TView extends string = string>({ setCurrentView, isNewAsset, newAssetAccount, newAssetId, setNewAssetId, searchQuery, setSearchQuery, filteredAssets, onSelectAsset, handleAddNewAsset, handleContinueToGenerate, isRgbConnected, isSparkConnected, isArkadeConnected, isLiquidConnected, }: DepositAssetSelectionProps<TView>): react_jsx_runtime.JSX.Element;
 
 interface DepositInvoiceAsset {
     asset_id?: string;
@@ -1783,4 +1793,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, 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 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 };

package/dist/web/index.js

@@ -2033,6 +2033,9 @@ function NostrNetworkIcon({
 function RgbNetworkIcon({ className = "size-3.5", alt = "RGB" }) {
   return /* @__PURE__ */ jsx25("img", { src: protocolIcons["RGB20"], alt, className: cn("object-contain", className) });
 }
+function LiquidNetworkIcon({ className = "size-3.5", alt = "Liquid" }) {
+  return /* @__PURE__ */ jsx25("img", { src: protocolIcons.Liquid, alt, className: cn("object-contain", className) });
+}
 
 // src/web/components/action-tile.tsx
 import { jsx as jsx26, jsxs as jsxs13 } from "react/jsx-runtime";
@@ -3205,6 +3208,7 @@ function BalanceBreakdown({
   btcLightning,
   btcSpark,
   btcArkade,
+  btcLiquid = 0,
   totalBTC,
   rgbAssets,
   accounts,
@@ -3221,6 +3225,7 @@ function BalanceBreakdown({
   btcLightningPending = false,
   btcSparkPending = false,
   btcArkadePending = false,
+  btcLiquidPending = false,
   onRefresh,
   isRefreshing = false,
   onNavigate,
@@ -3390,6 +3395,21 @@ function BalanceBreakdown({
                   formatFiat: formatFiatValue
                 }
               ),
+              (btcLiquid > 0 || btcLiquidPending) && /* @__PURE__ */ jsx37(
+                NetworkRow,
+                {
+                  icon: /* @__PURE__ */ jsx37(LiquidNetworkIcon, { className: "size-3.5" }),
+                  iconColor: "",
+                  dotColor: "bg-network-liquid",
+                  label: "BTC on Liquid",
+                  sublabel: "Liquid L-BTC balance",
+                  amount: btcLiquid,
+                  isPending: btcLiquidPending,
+                  visible: balanceVisible,
+                  format,
+                  formatFiat: formatFiatValue
+                }
+              ),
               rgbAssets.length > 0 && /* @__PURE__ */ jsx37(RgbAssetsBreakdown, { assets: rgbAssets, balanceVisible }),
               tokenValueSats !== void 0 && tokenValueSats > 0 && /* @__PURE__ */ jsxs24("div", { className: "mt-4 pt-1", children: [
                 /* @__PURE__ */ jsx37("p", { className: "mb-3 text-xxs font-bold uppercase tracking-widest text-white/30", children: "Token Holdings" }),
@@ -3568,6 +3588,16 @@ import { Fragment as Fragment6, jsx as jsx38, jsxs as jsxs25 } from "react/jsx-r
 function NetworkMiniBadge({ iconUrl, label }) {
   return /* @__PURE__ */ jsx38("span", { className: cn(iconBadgeOverlayClass, "overflow-hidden"), children: iconUrl ? /* @__PURE__ */ jsx38("img", { src: iconUrl, alt: label ?? "", className: "h-full w-full object-cover" }) : /* @__PURE__ */ jsx38("span", { className: "flex h-full w-full items-center justify-center bg-muted text-xxs font-bold uppercase leading-none text-muted-foreground", children: label?.charAt(0) }) });
 }
+function readableTagColor(color) {
+  const raw = color.replace("#", "");
+  const hex = raw.length === 3 ? raw.split("").map((char) => char + char).join("") : raw;
+  if (!/^[0-9a-fA-F]{6}$/.test(hex)) return color;
+  const r = parseInt(hex.slice(0, 2), 16);
+  const g = parseInt(hex.slice(2, 4), 16);
+  const b = parseInt(hex.slice(4, 6), 16);
+  const luminance = (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;
+  return luminance < 0.45 ? `color-mix(in srgb, ${color} 45%, white)` : color;
+}
 function AssetSelector({
   label,
   selectedTicker,
@@ -3659,7 +3689,7 @@ function AssetSelector({
               ),
               style: option.networkTag.color ? {
                 backgroundColor: `color-mix(in srgb, ${option.networkTag.color} 15%, transparent)`,
-                color: option.networkTag.color
+                color: readableTagColor(option.networkTag.color)
               } : void 0,
               children: option.networkTag.label
             }
@@ -4696,7 +4726,7 @@ function WithdrawAmountInput({
   const customFeeEnabled = typeof setFeeRateMode === "function";
   const activeFeeMode = feeRateMode ?? feeRate;
   const unitLabel = selectedAssetId === "BTC" ? "sats" : selectedAssetTicker ?? "units";
-  const showAmountInput = addressType === "bitcoin" || addressType === "spark" || addressType === "arkade" || addressType === "lightning-address" || addressType === "lnurl-pay" || addressType === "rgb" && !decodedRgbInvoice?.assignment?.value || addressType === "lightning" && !decodedLnInvoice?.amount && !decodedLnInvoice?.asset_amount;
+  const showAmountInput = addressType === "bitcoin" || addressType === "spark" || addressType === "arkade" || addressType === "liquid" || addressType === "lightning-address" || addressType === "lnurl-pay" || addressType === "rgb" && !decodedRgbInvoice?.assignment?.value || addressType === "lightning" && !decodedLnInvoice?.amount && !decodedLnInvoice?.asset_amount;
   const enteredNum = parseFloat(amount.replace(/[^\d.-]/g, "") || "0") || 0;
   const balanceNum = parseFloat(formattedBalance.replace(/,/g, "") || "0") || 0;
   const isOverBalance = enteredNum > 0 && balanceNum > 0 && enteredNum > balanceNum;
@@ -4965,9 +4995,9 @@ function WithdrawInvoiceInfo({
       ] })
     ] });
   }
-  if (addressType === "bitcoin" || addressType === "arkade") {
+  if (addressType === "bitcoin" || addressType === "arkade" || addressType === "liquid") {
     return /* @__PURE__ */ jsx48("div", { className: "rounded-2xl bg-card p-5 shadow-inner", children: /* @__PURE__ */ jsxs35("div", { className: "flex justify-between text-sm", children: [
-      /* @__PURE__ */ jsx48("span", { className: "text-muted-foreground", children: addressType === "arkade" ? "Available Arkade Balance" : "Available Balance" }),
+      /* @__PURE__ */ jsx48("span", { className: "text-muted-foreground", children: addressType === "arkade" ? "Available Arkade Balance" : addressType === "liquid" ? "Available Liquid Balance" : "Available Balance" }),
       /* @__PURE__ */ jsxs35("span", { className: "font-bold text-white", children: [
         formatRawAmount(assetBalance, getAssetPrecisionForId(allAssets, selectedAssetId)),
         " ",
@@ -7299,6 +7329,13 @@ var ACCOUNT_META = {
     accentText: "text-network-arkade",
     accentBorder: "border-network-arkade/30",
     icon: /* @__PURE__ */ jsx75("img", { src: "/icons/arkade/arkade-icon.svg", alt: "", className: "h-2.5 w-2.5 rounded-[1px] object-contain" })
+  },
+  LIQUID: {
+    shortLabel: "Liquid",
+    accentBg: "bg-network-liquid/10",
+    accentText: "text-network-liquid",
+    accentBorder: "border-network-liquid/30",
+    icon: /* @__PURE__ */ jsx75(LiquidNetworkIcon, { className: "h-2.5 w-2.5" })
   }
 };
 var METHOD_META = {
@@ -7569,6 +7606,18 @@ var NETWORK_OPTIONS = {
     accentBg: "bg-network-arkade/10",
     accentBorder: "border-network-arkade/30",
     accentText: "text-network-arkade"
+  },
+  LIQUID: {
+    // Liquid is its own chain; reuse the "onchain" network key for the modal's
+    // network callback (there's no dedicated Liquid DepositNetworkKey).
+    network: "onchain",
+    account: "LIQUID",
+    label: "Liquid",
+    description: "Receive L-BTC or a Liquid asset (USDt) via a confidential Liquid address.",
+    icon: /* @__PURE__ */ jsx77(LiquidNetworkIcon, { className: "h-[18px] w-[18px]" }),
+    accentBg: "bg-network-liquid/10",
+    accentBorder: "border-network-liquid/30",
+    accentText: "text-network-liquid"
   }
 };
 function DepositNetworkDefaultModal({
@@ -8029,7 +8078,8 @@ import { jsx as jsx80, jsxs as jsxs66 } from "react/jsx-runtime";
 var ACCOUNT_TITLES = {
   RGB: "RGB & Lightning",
   SPARK: "Spark",
-  ARKADE: "Arkade"
+  ARKADE: "Arkade",
+  LIQUID: "Liquid"
 };
 var METHOD_META2 = {
   bitcoin_l1: { label: "Bitcoin address", summary: "Standard on-chain BTC transfer." },
@@ -8226,12 +8276,14 @@ import { jsx as jsx81, jsxs as jsxs67 } from "react/jsx-runtime";
 var ADD_ASSET_SUBTITLE = {
   RGB: "RGB asset on Bitcoin",
   SPARK: "Spark-native asset",
-  ARKADE: "Arkade-native asset"
+  ARKADE: "Arkade-native asset",
+  LIQUID: "L-BTC or Liquid asset"
 };
 var PROTOCOL_BADGE = {
   RGB: { label: "RGB", className: "bg-network-rgb-chip text-network-rgb-text" },
   SPARK: { label: "Spark", className: "bg-network-spark-chip text-network-spark-text" },
-  ARKADE: { label: "Arkade", className: "bg-network-arkade-chip text-network-arkade-text" }
+  ARKADE: { label: "Arkade", className: "bg-network-arkade-chip text-network-arkade-text" },
+  LIQUID: { label: "Liquid", className: "bg-network-liquid-chip text-network-liquid-text" }
 };
 function formatAssetBalance(asset) {
   const raw = asset.balance ?? 0;
@@ -8257,7 +8309,8 @@ function DepositAssetSelection({
   handleContinueToGenerate,
   isRgbConnected,
   isSparkConnected,
-  isArkadeConnected
+  isArkadeConnected,
+  isLiquidConnected = false
 }) {
   const btcAsset = filteredAssets.find((asset) => asset.ticker === "BTC");
   const ownedAssets = filteredAssets.filter((asset) => asset.ticker !== "BTC").slice().sort((a, b) => (b.balance ?? 0) - (a.balance ?? 0));
@@ -8297,6 +8350,15 @@ function DepositAssetSelection({
       idleClass: "bg-network-arkade/10 hover:bg-network-arkade/20",
       activeClass: "bg-network-arkade/25",
       titleHoverClass: "group-hover:text-network-arkade"
+    },
+    {
+      account: "LIQUID",
+      title: "New Liquid Asset",
+      ticker: "LIQUID",
+      enabled: isLiquidConnected,
+      idleClass: "bg-network-liquid/10 hover:bg-network-liquid/20",
+      activeClass: "bg-network-liquid/25",
+      titleHoverClass: "group-hover:text-network-liquid"
     }
   ].filter((option) => option.enabled);
   return /* @__PURE__ */ jsxs67("div", { className: "relative flex h-screen flex-col overflow-hidden bg-background pt-16 font-display text-foreground", children: [
@@ -8487,7 +8549,7 @@ function DepositAssetSelection({
               handleAddNewAsset(option.account);
             },
             children: [
-              /* @__PURE__ */ jsx81(AssetIcon, { ticker: option.ticker, size: 36, className: "flex-shrink-0" }),
+              option.account === "LIQUID" ? /* @__PURE__ */ jsx81("span", { className: "flex size-9 shrink-0 items-center justify-center rounded-full bg-network-liquid/10", children: /* @__PURE__ */ jsx81(LiquidNetworkIcon, { className: "size-5" }) }) : /* @__PURE__ */ jsx81(AssetIcon, { ticker: option.ticker, size: 36, className: "flex-shrink-0" }),
               /* @__PURE__ */ jsxs67("div", { className: "min-w-0 flex-1", children: [
                 /* @__PURE__ */ jsx81("div", { className: cn("text-sm font-bold tracking-wide text-white", option.titleHoverClass), children: option.title }),
                 /* @__PURE__ */ jsx81("div", { className: "mt-0.5 text-xxs text-white/40", children: ADD_ASSET_SUBTITLE[option.account] })
@@ -8507,7 +8569,8 @@ import { jsx as jsx82, jsxs as jsxs68 } from "react/jsx-runtime";
 var ACCOUNT_TITLES2 = {
   RGB: "RGB & Lightning",
   SPARK: "Spark",
-  ARKADE: "Arkade"
+  ARKADE: "Arkade",
+  LIQUID: "Liquid"
 };
 function getAssetFamily(assetId, ticker) {
   if (assetId === "BTC") return "BTC";
@@ -8608,7 +8671,10 @@ function DepositInvoiceGeneration({
   const routeAccounts = {
     RGB: isRgbConnected,
     SPARK: isSparkConnected,
-    ARKADE: isArkadeConnected
+    ARKADE: isArkadeConnected,
+    // Liquid isn't offered by kaleido-ui's own DepositInvoiceGeneration; the
+    // KaleidoSwap extension uses its own component for the Liquid receive path.
+    LIQUID: false
   };
   const availableAccounts = resolveReceiveAccounts({ assetFamily, accounts: routeAccounts });
   const methodOptions = resolveReceiveMethodOptions({
@@ -8898,6 +8964,7 @@ export {
   KaleidoScopeHeroAnimation,
   Label2 as Label,
   LightningNetworkIcon,
+  LiquidNetworkIcon,
   ListSkeletonRows,
   LoadingCard,
   MethodChoiceChip,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kaleido-ui",
-  "version": "0.1.87",
+  "version": "0.1.89",
   "description": "KaleidoSwap shared UI library — design tokens, web components (Tailwind + Radix), and React Native components extending WDK UI Kit",
   "license": "MIT",
   "type": "module",