kaleido-ui 0.1.15 → 0.1.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -4137,7 +4137,7 @@ function RouteChoiceCard({
4137
4137
  recommended,
4138
4138
  onClick
4139
4139
  }) {
4140
- const { disabled = false, disabledReason } = route;
4140
+ const { disabled = false, disabledReason, accountIcon, balanceLabel } = route;
4141
4141
  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
4142
4142
  "button",
4143
4143
  {
@@ -4153,15 +4153,21 @@ function RouteChoiceCard({
4153
4153
  ),
4154
4154
  children: [
4155
4155
  /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
4156
- /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { children: [
4157
- /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex items-center gap-2", children: [
4158
- /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "text-sm font-bold text-white", children: route.accountTitle }),
4159
- recommended && !disabled && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "rounded-full border border-primary/20 bg-primary/10 px-2 py-0.5 text-xxs font-bold uppercase tracking-wider text-primary", children: "Recommended" }),
4160
- disabled && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "rounded-full border border-danger/20 bg-danger/10 px-2 py-0.5 text-xxs font-bold uppercase tracking-wider text-danger", children: "Insufficient" })
4161
- ] }),
4162
- /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "mt-1 text-xs text-white/45", children: route.methodLabel })
4156
+ /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex min-w-0 items-start gap-3", children: [
4157
+ accountIcon && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "mt-0.5 shrink-0", children: accountIcon }),
4158
+ /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "min-w-0", children: [
4159
+ /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex flex-wrap items-center gap-2", children: [
4160
+ /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "text-sm font-bold text-white", children: route.accountTitle }),
4161
+ recommended && !disabled && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "rounded-full border border-primary/20 bg-primary/10 px-2 py-0.5 text-xxs font-bold uppercase tracking-wider text-primary", children: "Recommended" }),
4162
+ disabled && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "rounded-full border border-danger/20 bg-danger/10 px-2 py-0.5 text-xxs font-bold uppercase tracking-wider text-danger", children: "Insufficient" })
4163
+ ] }),
4164
+ /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "mt-1 text-xs text-white/45", children: route.methodLabel })
4165
+ ] })
4163
4166
  ] }),
4164
- /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "text-xxs font-bold uppercase tracking-wider text-white/35", children: route.feeHint })
4167
+ /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex shrink-0 flex-col items-end gap-1", children: [
4168
+ /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "text-xxs font-bold uppercase tracking-wider text-white/35", children: route.feeHint }),
4169
+ balanceLabel && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "font-mono text-xxs text-white/50", children: balanceLabel })
4170
+ ] })
4165
4171
  ] }),
4166
4172
  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "mt-3 text-xs leading-relaxed text-muted-foreground", children: route.summary }),
4167
4173
  disabled && disabledReason && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "mt-2 text-xxs leading-relaxed text-danger/80", children: disabledReason })
@@ -5208,6 +5214,7 @@ function DepositGeneratedView({
5208
5214
  setRecipientId,
5209
5215
  setAmount,
5210
5216
  setInvoiceStatus,
5217
+ showQrNetworkBadge = true,
5211
5218
  onRegenerate
5212
5219
  }) {
5213
5220
  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "space-y-3 animate-in fade-in zoom-in-95 duration-300", children: [
@@ -5265,7 +5272,7 @@ function DepositGeneratedView({
5265
5272
  ),
5266
5273
  style: net.qrGlow,
5267
5274
  children: [
5268
- network !== "spark" && network !== "arkade" && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
5275
+ showQrNetworkBadge && network !== "spark" && network !== "arkade" && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
5269
5276
  "div",
5270
5277
  {
5271
5278
  className: cn(
@@ -5423,11 +5430,12 @@ function DepositPreGeneration({
5423
5430
  getUnitLabel,
5424
5431
  generateInvoice,
5425
5432
  needsColorableUtxos = false,
5426
- onOpenCreateUtxos
5433
+ onOpenCreateUtxos,
5434
+ showReceiveSummary = true
5427
5435
  }) {
5428
5436
  const method = METHOD_META2[currentMethod];
5429
5437
  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "space-y-3", children: [
5430
- /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "rounded-2xl border border-white/8 bg-white/4 p-3", children: [
5438
+ showReceiveSummary && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "rounded-2xl border border-white/8 bg-white/4 p-3", children: [
5431
5439
  /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "text-xxs font-bold uppercase tracking-widest text-white/35", children: "Receive Summary" }),
5432
5440
  /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "mt-2 grid grid-cols-1 gap-2 text-xs", children: [
5433
5441
  /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
@@ -6021,6 +6029,7 @@ function DepositInvoiceGeneration({
6021
6029
  const addressLabel = network === "spark" ? "Spark Address" : network === "arkade" ? arkSubMode === "boarding" ? "Boarding Address" : "Arkade Address" : network === "lightning" ? "Lightning Invoice" : "Deposit Address";
6022
6030
  const showChannelWarning = selectedAccount === "RGB" && network === "lightning" && !channelsLoading && channels.length === 0 && !isSparkConnected;
6023
6031
  const showLiquidityWarning = !isSparkLightning && network === "lightning" && maxDepositAmount === 0 && !channelsLoading && !isBtc;
6032
+ const isNewRgbAsset = isNewAsset && assetFamily === "RGB";
6024
6033
  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex h-screen flex-col overflow-hidden bg-background font-display text-foreground", children: [
6025
6034
  /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
6026
6035
  PageHeader,
@@ -6150,7 +6159,8 @@ function DepositInvoiceGeneration({
6150
6159
  getUnitLabel,
6151
6160
  generateInvoice,
6152
6161
  needsColorableUtxos,
6153
- onOpenCreateUtxos
6162
+ onOpenCreateUtxos,
6163
+ showReceiveSummary: !isNewRgbAsset
6154
6164
  }
6155
6165
  ) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
6156
6166
  DepositGeneratedView,
@@ -6178,7 +6188,8 @@ function DepositInvoiceGeneration({
6178
6188
  setRecipientId,
6179
6189
  setAmount,
6180
6190
  setInvoiceStatus,
6181
- handleDone
6191
+ handleDone,
6192
+ showQrNetworkBadge: false
6182
6193
  }
6183
6194
  ) })
6184
6195
  ] });
@@ -808,6 +808,10 @@ interface WithdrawRouteOption<TAccount extends string = string> {
808
808
  disabled?: boolean;
809
809
  /** Short reason shown under the disabled card. Pair with `disabled`. */
810
810
  disabledReason?: string;
811
+ /** Optional account/protocol logo rendered on the left of the card (e.g. NetworkBadge). */
812
+ accountIcon?: ReactNode;
813
+ /** Optional pre-formatted balance label (e.g. "1.23 BTC available") shown on the card. */
814
+ balanceLabel?: string;
811
815
  }
812
816
  interface WithdrawRouteSummary {
813
817
  method: string;
@@ -1136,6 +1140,7 @@ interface DepositGeneratedViewProps {
1136
1140
  setRecipientId: (value: string) => void;
1137
1141
  setAmount: (value: string) => void;
1138
1142
  setInvoiceStatus: (value: string | null) => void;
1143
+ showQrNetworkBadge?: boolean;
1139
1144
  /**
1140
1145
  * @deprecated Done button removed in v0.1.8 per the v1.0.0 wallet redesign;
1141
1146
  * users navigate away via the standard back button. Prop kept for source
@@ -1150,7 +1155,7 @@ interface DepositGeneratedViewProps {
1150
1155
  */
1151
1156
  onRegenerate?: () => Promise<void> | void;
1152
1157
  }
1153
- declare function DepositGeneratedView({ network, net, isBtc, address, addressLabel, recipientId, arkSubMode, invoiceStatus, isInvoicePending, isInvoicePaid, isInvoiceFailedOrExpired, amount, handleAmountChange, loading, copied, copyToClipboard, getUnitLabel, selectedAsset, maxDepositAmount, setAddress, setRecipientId, setAmount, setInvoiceStatus, onRegenerate, }: DepositGeneratedViewProps): react_jsx_runtime.JSX.Element;
1158
+ declare function DepositGeneratedView({ network, net, isBtc, address, addressLabel, recipientId, arkSubMode, invoiceStatus, isInvoicePending, isInvoicePaid, isInvoiceFailedOrExpired, amount, handleAmountChange, loading, copied, copyToClipboard, getUnitLabel, selectedAsset, maxDepositAmount, setAddress, setRecipientId, setAmount, setInvoiceStatus, showQrNetworkBadge, onRegenerate, }: DepositGeneratedViewProps): react_jsx_runtime.JSX.Element;
1154
1159
 
1155
1160
  interface DepositPreGenerationAsset {
1156
1161
  ticker?: string;
@@ -1181,8 +1186,9 @@ interface DepositPreGenerationProps {
1181
1186
  needsColorableUtxos?: boolean;
1182
1187
  /** Invoked by the inline "Create Colorable UTXOs" CTA. */
1183
1188
  onOpenCreateUtxos?: () => void;
1189
+ showReceiveSummary?: boolean;
1184
1190
  }
1185
- declare function DepositPreGeneration({ selectedAsset, isBtc, network, net, selectedAccount, currentMethod, channelsLoading, showChannelWarning, showLiquidityWarning, isAutoGenerate, loading, usePrivacy, setUsePrivacy, amount, handleAmountChange, getUnitLabel, generateInvoice, needsColorableUtxos, onOpenCreateUtxos, }: DepositPreGenerationProps): react_jsx_runtime.JSX.Element;
1191
+ declare function DepositPreGeneration({ selectedAsset, isBtc, network, net, selectedAccount, currentMethod, channelsLoading, showChannelWarning, showLiquidityWarning, isAutoGenerate, loading, usePrivacy, setUsePrivacy, amount, handleAmountChange, getUnitLabel, generateInvoice, needsColorableUtxos, onOpenCreateUtxos, showReceiveSummary, }: DepositPreGenerationProps): react_jsx_runtime.JSX.Element;
1186
1192
 
1187
1193
  interface DepositSelectionAsset {
1188
1194
  asset_id: string;
@@ -808,6 +808,10 @@ interface WithdrawRouteOption<TAccount extends string = string> {
808
808
  disabled?: boolean;
809
809
  /** Short reason shown under the disabled card. Pair with `disabled`. */
810
810
  disabledReason?: string;
811
+ /** Optional account/protocol logo rendered on the left of the card (e.g. NetworkBadge). */
812
+ accountIcon?: ReactNode;
813
+ /** Optional pre-formatted balance label (e.g. "1.23 BTC available") shown on the card. */
814
+ balanceLabel?: string;
811
815
  }
812
816
  interface WithdrawRouteSummary {
813
817
  method: string;
@@ -1136,6 +1140,7 @@ interface DepositGeneratedViewProps {
1136
1140
  setRecipientId: (value: string) => void;
1137
1141
  setAmount: (value: string) => void;
1138
1142
  setInvoiceStatus: (value: string | null) => void;
1143
+ showQrNetworkBadge?: boolean;
1139
1144
  /**
1140
1145
  * @deprecated Done button removed in v0.1.8 per the v1.0.0 wallet redesign;
1141
1146
  * users navigate away via the standard back button. Prop kept for source
@@ -1150,7 +1155,7 @@ interface DepositGeneratedViewProps {
1150
1155
  */
1151
1156
  onRegenerate?: () => Promise<void> | void;
1152
1157
  }
1153
- declare function DepositGeneratedView({ network, net, isBtc, address, addressLabel, recipientId, arkSubMode, invoiceStatus, isInvoicePending, isInvoicePaid, isInvoiceFailedOrExpired, amount, handleAmountChange, loading, copied, copyToClipboard, getUnitLabel, selectedAsset, maxDepositAmount, setAddress, setRecipientId, setAmount, setInvoiceStatus, onRegenerate, }: DepositGeneratedViewProps): react_jsx_runtime.JSX.Element;
1158
+ declare function DepositGeneratedView({ network, net, isBtc, address, addressLabel, recipientId, arkSubMode, invoiceStatus, isInvoicePending, isInvoicePaid, isInvoiceFailedOrExpired, amount, handleAmountChange, loading, copied, copyToClipboard, getUnitLabel, selectedAsset, maxDepositAmount, setAddress, setRecipientId, setAmount, setInvoiceStatus, showQrNetworkBadge, onRegenerate, }: DepositGeneratedViewProps): react_jsx_runtime.JSX.Element;
1154
1159
 
1155
1160
  interface DepositPreGenerationAsset {
1156
1161
  ticker?: string;
@@ -1181,8 +1186,9 @@ interface DepositPreGenerationProps {
1181
1186
  needsColorableUtxos?: boolean;
1182
1187
  /** Invoked by the inline "Create Colorable UTXOs" CTA. */
1183
1188
  onOpenCreateUtxos?: () => void;
1189
+ showReceiveSummary?: boolean;
1184
1190
  }
1185
- declare function DepositPreGeneration({ selectedAsset, isBtc, network, net, selectedAccount, currentMethod, channelsLoading, showChannelWarning, showLiquidityWarning, isAutoGenerate, loading, usePrivacy, setUsePrivacy, amount, handleAmountChange, getUnitLabel, generateInvoice, needsColorableUtxos, onOpenCreateUtxos, }: DepositPreGenerationProps): react_jsx_runtime.JSX.Element;
1191
+ declare function DepositPreGeneration({ selectedAsset, isBtc, network, net, selectedAccount, currentMethod, channelsLoading, showChannelWarning, showLiquidityWarning, isAutoGenerate, loading, usePrivacy, setUsePrivacy, amount, handleAmountChange, getUnitLabel, generateInvoice, needsColorableUtxos, onOpenCreateUtxos, showReceiveSummary, }: DepositPreGenerationProps): react_jsx_runtime.JSX.Element;
1186
1192
 
1187
1193
  interface DepositSelectionAsset {
1188
1194
  asset_id: string;
package/dist/web/index.js CHANGED
@@ -3982,7 +3982,7 @@ function RouteChoiceCard({
3982
3982
  recommended,
3983
3983
  onClick
3984
3984
  }) {
3985
- const { disabled = false, disabledReason } = route;
3985
+ const { disabled = false, disabledReason, accountIcon, balanceLabel } = route;
3986
3986
  return /* @__PURE__ */ jsxs33(
3987
3987
  "button",
3988
3988
  {
@@ -3998,15 +3998,21 @@ function RouteChoiceCard({
3998
3998
  ),
3999
3999
  children: [
4000
4000
  /* @__PURE__ */ jsxs33("div", { className: "flex items-start justify-between gap-3", children: [
4001
- /* @__PURE__ */ jsxs33("div", { children: [
4002
- /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-2", children: [
4003
- /* @__PURE__ */ jsx45("span", { className: "text-sm font-bold text-white", children: route.accountTitle }),
4004
- recommended && !disabled && /* @__PURE__ */ jsx45("span", { className: "rounded-full border border-primary/20 bg-primary/10 px-2 py-0.5 text-xxs font-bold uppercase tracking-wider text-primary", children: "Recommended" }),
4005
- disabled && /* @__PURE__ */ jsx45("span", { className: "rounded-full border border-danger/20 bg-danger/10 px-2 py-0.5 text-xxs font-bold uppercase tracking-wider text-danger", children: "Insufficient" })
4006
- ] }),
4007
- /* @__PURE__ */ jsx45("p", { className: "mt-1 text-xs text-white/45", children: route.methodLabel })
4001
+ /* @__PURE__ */ jsxs33("div", { className: "flex min-w-0 items-start gap-3", children: [
4002
+ accountIcon && /* @__PURE__ */ jsx45("div", { className: "mt-0.5 shrink-0", children: accountIcon }),
4003
+ /* @__PURE__ */ jsxs33("div", { className: "min-w-0", children: [
4004
+ /* @__PURE__ */ jsxs33("div", { className: "flex flex-wrap items-center gap-2", children: [
4005
+ /* @__PURE__ */ jsx45("span", { className: "text-sm font-bold text-white", children: route.accountTitle }),
4006
+ recommended && !disabled && /* @__PURE__ */ jsx45("span", { className: "rounded-full border border-primary/20 bg-primary/10 px-2 py-0.5 text-xxs font-bold uppercase tracking-wider text-primary", children: "Recommended" }),
4007
+ disabled && /* @__PURE__ */ jsx45("span", { className: "rounded-full border border-danger/20 bg-danger/10 px-2 py-0.5 text-xxs font-bold uppercase tracking-wider text-danger", children: "Insufficient" })
4008
+ ] }),
4009
+ /* @__PURE__ */ jsx45("p", { className: "mt-1 text-xs text-white/45", children: route.methodLabel })
4010
+ ] })
4008
4011
  ] }),
4009
- /* @__PURE__ */ jsx45("span", { className: "text-xxs font-bold uppercase tracking-wider text-white/35", children: route.feeHint })
4012
+ /* @__PURE__ */ jsxs33("div", { className: "flex shrink-0 flex-col items-end gap-1", children: [
4013
+ /* @__PURE__ */ jsx45("span", { className: "text-xxs font-bold uppercase tracking-wider text-white/35", children: route.feeHint }),
4014
+ balanceLabel && /* @__PURE__ */ jsx45("span", { className: "font-mono text-xxs text-white/50", children: balanceLabel })
4015
+ ] })
4010
4016
  ] }),
4011
4017
  /* @__PURE__ */ jsx45("p", { className: "mt-3 text-xs leading-relaxed text-muted-foreground", children: route.summary }),
4012
4018
  disabled && disabledReason && /* @__PURE__ */ jsx45("p", { className: "mt-2 text-xxs leading-relaxed text-danger/80", children: disabledReason })
@@ -5053,6 +5059,7 @@ function DepositGeneratedView({
5053
5059
  setRecipientId,
5054
5060
  setAmount,
5055
5061
  setInvoiceStatus,
5062
+ showQrNetworkBadge = true,
5056
5063
  onRegenerate
5057
5064
  }) {
5058
5065
  return /* @__PURE__ */ jsxs43("div", { className: "space-y-3 animate-in fade-in zoom-in-95 duration-300", children: [
@@ -5110,7 +5117,7 @@ function DepositGeneratedView({
5110
5117
  ),
5111
5118
  style: net.qrGlow,
5112
5119
  children: [
5113
- network !== "spark" && network !== "arkade" && /* @__PURE__ */ jsxs43(
5120
+ showQrNetworkBadge && network !== "spark" && network !== "arkade" && /* @__PURE__ */ jsxs43(
5114
5121
  "div",
5115
5122
  {
5116
5123
  className: cn(
@@ -5268,11 +5275,12 @@ function DepositPreGeneration({
5268
5275
  getUnitLabel,
5269
5276
  generateInvoice,
5270
5277
  needsColorableUtxos = false,
5271
- onOpenCreateUtxos
5278
+ onOpenCreateUtxos,
5279
+ showReceiveSummary = true
5272
5280
  }) {
5273
5281
  const method = METHOD_META2[currentMethod];
5274
5282
  return /* @__PURE__ */ jsxs44("div", { className: "space-y-3", children: [
5275
- /* @__PURE__ */ jsxs44("div", { className: "rounded-2xl border border-white/8 bg-white/4 p-3", children: [
5283
+ showReceiveSummary && /* @__PURE__ */ jsxs44("div", { className: "rounded-2xl border border-white/8 bg-white/4 p-3", children: [
5276
5284
  /* @__PURE__ */ jsx57("p", { className: "text-xxs font-bold uppercase tracking-widest text-white/35", children: "Receive Summary" }),
5277
5285
  /* @__PURE__ */ jsxs44("div", { className: "mt-2 grid grid-cols-1 gap-2 text-xs", children: [
5278
5286
  /* @__PURE__ */ jsxs44("div", { className: "flex items-center justify-between gap-3", children: [
@@ -5866,6 +5874,7 @@ function DepositInvoiceGeneration({
5866
5874
  const addressLabel = network === "spark" ? "Spark Address" : network === "arkade" ? arkSubMode === "boarding" ? "Boarding Address" : "Arkade Address" : network === "lightning" ? "Lightning Invoice" : "Deposit Address";
5867
5875
  const showChannelWarning = selectedAccount === "RGB" && network === "lightning" && !channelsLoading && channels.length === 0 && !isSparkConnected;
5868
5876
  const showLiquidityWarning = !isSparkLightning && network === "lightning" && maxDepositAmount === 0 && !channelsLoading && !isBtc;
5877
+ const isNewRgbAsset = isNewAsset && assetFamily === "RGB";
5869
5878
  return /* @__PURE__ */ jsxs46("div", { className: "flex h-screen flex-col overflow-hidden bg-background font-display text-foreground", children: [
5870
5879
  /* @__PURE__ */ jsx59(
5871
5880
  PageHeader,
@@ -5995,7 +6004,8 @@ function DepositInvoiceGeneration({
5995
6004
  getUnitLabel,
5996
6005
  generateInvoice,
5997
6006
  needsColorableUtxos,
5998
- onOpenCreateUtxos
6007
+ onOpenCreateUtxos,
6008
+ showReceiveSummary: !isNewRgbAsset
5999
6009
  }
6000
6010
  ) : /* @__PURE__ */ jsx59(
6001
6011
  DepositGeneratedView,
@@ -6023,7 +6033,8 @@ function DepositInvoiceGeneration({
6023
6033
  setRecipientId,
6024
6034
  setAmount,
6025
6035
  setInvoiceStatus,
6026
- handleDone
6036
+ handleDone,
6037
+ showQrNetworkBadge: false
6027
6038
  }
6028
6039
  ) })
6029
6040
  ] });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kaleido-ui",
3
- "version": "0.1.15",
3
+ "version": "0.1.17",
4
4
  "description": "KaleidoSwap shared UI library — design tokens, web components (Tailwind + Radix), and React Native components extending WDK UI Kit",
5
5
  "license": "MIT",
6
6
  "type": "module",