kaleido-ui 0.1.34 → 0.1.36

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.
@@ -6429,7 +6429,7 @@ function BtcUnifiedReceive({
6429
6429
  type: "text",
6430
6430
  value: amount,
6431
6431
  onChange: handleAmountChange,
6432
- placeholder: "Any amount (amountless)",
6432
+ placeholder: "Any amount",
6433
6433
  className: "w-full rounded-lg border bg-white/5 px-3 py-1.5 font-mono text-xs font-bold text-white transition-all placeholder:text-white/25 focus:border-primary/40 focus:outline-none",
6434
6434
  inputMode: "decimal"
6435
6435
  }
@@ -6454,24 +6454,27 @@ function BtcUnifiedReceive({
6454
6454
  ]
6455
6455
  }
6456
6456
  ),
6457
- /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
6458
- "button",
6459
- {
6460
- type: "button",
6461
- className: cn(
6462
- "flex items-center gap-1 rounded-full border px-2.5 py-1 text-xxs font-bold uppercase tracking-widest transition-all",
6463
- copied ? "border-primary/30 bg-primary/10 text-primary" : "border-border bg-white/5 text-muted-foreground hover:border-white/20 hover:bg-accent hover:text-white"
6464
- ),
6465
- onClick: (event) => {
6466
- event.stopPropagation();
6467
- void copyToClipboard(accountReceiveResult.qrValue);
6468
- },
6469
- children: [
6470
- /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icon2, { name: copied ? "check" : "content_copy", size: "xs" }),
6471
- copied ? "Copied" : `Copy ${accountReceiveResult.qrLabel}`
6472
- ]
6473
- }
6474
- )
6457
+ (() => {
6458
+ const isQrCopied = copied === accountReceiveResult.qrValue;
6459
+ return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
6460
+ "button",
6461
+ {
6462
+ type: "button",
6463
+ className: cn(
6464
+ "flex items-center gap-1 rounded-full border px-2.5 py-1 text-xxs font-bold uppercase tracking-widest transition-all",
6465
+ isQrCopied ? "border-primary/30 bg-primary/10 text-primary" : "border-border bg-white/5 text-muted-foreground hover:border-white/20 hover:bg-accent hover:text-white"
6466
+ ),
6467
+ onClick: (event) => {
6468
+ event.stopPropagation();
6469
+ void copyToClipboard(accountReceiveResult.qrValue);
6470
+ },
6471
+ children: [
6472
+ /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icon2, { name: isQrCopied ? "check" : "content_copy", size: "xs" }),
6473
+ isQrCopied ? "Copied" : `Copy ${accountReceiveResult.qrLabel}`
6474
+ ]
6475
+ }
6476
+ );
6477
+ })()
6475
6478
  ] }),
6476
6479
  invoiceStatus && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
6477
6480
  InvoiceStatusBanner,
@@ -6508,7 +6511,7 @@ function BtcUnifiedReceive({
6508
6511
  ] }),
6509
6512
  /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { className: "mt-0.5 truncate font-mono text-tiny text-muted-foreground", children: address.value.length > 50 ? `${address.value.slice(0, 18)}...${address.value.slice(-14)}` : address.value })
6510
6513
  ] }),
6511
- /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(CopyIcon, { copied })
6514
+ /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(CopyIcon, { copied: copied === address.value })
6512
6515
  ]
6513
6516
  },
6514
6517
  address.network
@@ -6600,7 +6603,7 @@ function DepositGeneratedView({
6600
6603
  type: "text",
6601
6604
  value: amount,
6602
6605
  onChange: handleAmountChange,
6603
- placeholder: "Any amount (amountless)",
6606
+ placeholder: "Any amount",
6604
6607
  className: "w-full rounded-lg border bg-white/5 px-3 py-1.5 font-mono text-xs font-bold text-white transition-all placeholder:text-white/25 focus:border-warning/40 focus:outline-none",
6605
6608
  inputMode: "decimal"
6606
6609
  }
@@ -6620,7 +6623,7 @@ function DepositGeneratedView({
6620
6623
  type: "text",
6621
6624
  value: amount,
6622
6625
  onChange: handleAmountChange,
6623
- placeholder: `Any amount (${selectedAsset?.ticker ?? "amountless"})`,
6626
+ placeholder: selectedAsset?.ticker ? `Any amount (${selectedAsset.ticker})` : "Any amount",
6624
6627
  className: "w-full rounded-lg border bg-white/5 px-3 py-1.5 font-mono text-xs font-bold text-white transition-all placeholder:text-white/25 focus:border-warning/40 focus:outline-none",
6625
6628
  inputMode: "decimal"
6626
6629
  }
@@ -6668,24 +6671,27 @@ function DepositGeneratedView({
6668
6671
  ]
6669
6672
  }
6670
6673
  ),
6671
- /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
6672
- "button",
6673
- {
6674
- type: "button",
6675
- className: cn(
6676
- "flex items-center gap-1 rounded-full border px-2.5 py-1 text-xxs font-bold uppercase tracking-widest transition-all",
6677
- copied ? "border-primary/30 bg-primary/10 text-primary" : "border-border bg-white/5 text-muted-foreground hover:border-white/20 hover:bg-accent hover:text-white"
6678
- ),
6679
- onClick: (event) => {
6680
- event.stopPropagation();
6681
- void copyToClipboard(address);
6682
- },
6683
- children: [
6684
- /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Icon2, { name: copied ? "check" : "content_copy", size: "xs" }),
6685
- copied ? "Copied" : network === "lightning" ? "Copy Invoice" : "Copy Address"
6686
- ]
6687
- }
6688
- )
6674
+ (() => {
6675
+ const isAddressCopied = copied === address;
6676
+ return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
6677
+ "button",
6678
+ {
6679
+ type: "button",
6680
+ className: cn(
6681
+ "flex items-center gap-1 rounded-full border px-2.5 py-1 text-xxs font-bold uppercase tracking-widest transition-all",
6682
+ isAddressCopied ? "border-primary/30 bg-primary/10 text-primary" : "border-border bg-white/5 text-muted-foreground hover:border-white/20 hover:bg-accent hover:text-white"
6683
+ ),
6684
+ onClick: (event) => {
6685
+ event.stopPropagation();
6686
+ void copyToClipboard(address);
6687
+ },
6688
+ children: [
6689
+ /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Icon2, { name: isAddressCopied ? "check" : "content_copy", size: "xs" }),
6690
+ isAddressCopied ? "Copied" : network === "lightning" ? "Copy Invoice" : "Copy Address"
6691
+ ]
6692
+ }
6693
+ );
6694
+ })()
6689
6695
  ] }),
6690
6696
  network === "lightning" && invoiceStatus && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
6691
6697
  InvoiceStatusBanner,
@@ -6714,7 +6720,7 @@ function DepositGeneratedView({
6714
6720
  /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: cn("text-xxs font-bold uppercase tracking-widest", net.text), children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { "data-testid": "deposit-address-label", children: addressLabel }) }),
6715
6721
  /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: "mt-0.5 truncate font-mono text-tiny text-muted-foreground", children: address.length > 50 ? `${address.slice(0, 18)}...${address.slice(-14)}` : address })
6716
6722
  ] }),
6717
- /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(CopyIcon, { copied })
6723
+ /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(CopyIcon, { copied: copied === address })
6718
6724
  ]
6719
6725
  }
6720
6726
  ),
@@ -6733,7 +6739,7 @@ function DepositGeneratedView({
6733
6739
  /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: "text-xxs font-bold uppercase tracking-widest text-primary", children: "Recipient ID" }),
6734
6740
  /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: "mt-0.5 truncate font-mono text-tiny text-muted-foreground", children: recipientId.length > 50 ? `${recipientId.slice(0, 18)}...${recipientId.slice(-14)}` : recipientId })
6735
6741
  ] }),
6736
- /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(CopyIcon, { copied })
6742
+ /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(CopyIcon, { copied: copied === recipientId })
6737
6743
  ]
6738
6744
  }
6739
6745
  ),
@@ -1162,7 +1162,13 @@ interface BtcUnifiedReceiveProps {
1162
1162
  amount: string;
1163
1163
  handleAmountChange: (event: ChangeEvent<HTMLInputElement>) => void;
1164
1164
  loading: boolean;
1165
- copied: boolean;
1165
+ /**
1166
+ * Identifier of the most recently copied value (the address/invoice text),
1167
+ * or null when nothing was copied recently. Each row compares against its
1168
+ * own value so the "Copied" affordance only highlights the row the user
1169
+ * actually clicked.
1170
+ */
1171
+ copied: string | null;
1166
1172
  copyToClipboard: (text: string) => Promise<void>;
1167
1173
  setAddress: (value: string) => void;
1168
1174
  setAmount: (value: string) => void;
@@ -1200,7 +1206,13 @@ interface DepositGeneratedViewProps {
1200
1206
  amount: string;
1201
1207
  handleAmountChange: (event: ChangeEvent<HTMLInputElement>) => void;
1202
1208
  loading: boolean;
1203
- copied: boolean;
1209
+ /**
1210
+ * Identifier of the most recently copied value (the address/invoice text),
1211
+ * or null when nothing was copied recently. Each row compares against its
1212
+ * own value so the "Copied" affordance only highlights the row the user
1213
+ * actually clicked.
1214
+ */
1215
+ copied: string | null;
1204
1216
  copyToClipboard: (text: string) => Promise<void>;
1205
1217
  getUnitLabel: () => string;
1206
1218
  selectedAsset: DepositGeneratedAsset | null;
@@ -1310,7 +1322,10 @@ interface DepositGenerationController {
1310
1322
  isInvoicePaid: boolean;
1311
1323
  isInvoiceFailedOrExpired: boolean;
1312
1324
  accountReceiveResult: BtcUnifiedReceiveResult | null;
1313
- copied: boolean;
1325
+ /** Last-copied value (or null). Per-row matching prevents the "Copied"
1326
+ affordance from appearing on every address row when only one was
1327
+ clicked. */
1328
+ copied: string | null;
1314
1329
  handleAmountChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
1315
1330
  generateInvoice: () => Promise<void>;
1316
1331
  copyToClipboard: (text: string) => Promise<void>;
@@ -1162,7 +1162,13 @@ interface BtcUnifiedReceiveProps {
1162
1162
  amount: string;
1163
1163
  handleAmountChange: (event: ChangeEvent<HTMLInputElement>) => void;
1164
1164
  loading: boolean;
1165
- copied: boolean;
1165
+ /**
1166
+ * Identifier of the most recently copied value (the address/invoice text),
1167
+ * or null when nothing was copied recently. Each row compares against its
1168
+ * own value so the "Copied" affordance only highlights the row the user
1169
+ * actually clicked.
1170
+ */
1171
+ copied: string | null;
1166
1172
  copyToClipboard: (text: string) => Promise<void>;
1167
1173
  setAddress: (value: string) => void;
1168
1174
  setAmount: (value: string) => void;
@@ -1200,7 +1206,13 @@ interface DepositGeneratedViewProps {
1200
1206
  amount: string;
1201
1207
  handleAmountChange: (event: ChangeEvent<HTMLInputElement>) => void;
1202
1208
  loading: boolean;
1203
- copied: boolean;
1209
+ /**
1210
+ * Identifier of the most recently copied value (the address/invoice text),
1211
+ * or null when nothing was copied recently. Each row compares against its
1212
+ * own value so the "Copied" affordance only highlights the row the user
1213
+ * actually clicked.
1214
+ */
1215
+ copied: string | null;
1204
1216
  copyToClipboard: (text: string) => Promise<void>;
1205
1217
  getUnitLabel: () => string;
1206
1218
  selectedAsset: DepositGeneratedAsset | null;
@@ -1310,7 +1322,10 @@ interface DepositGenerationController {
1310
1322
  isInvoicePaid: boolean;
1311
1323
  isInvoiceFailedOrExpired: boolean;
1312
1324
  accountReceiveResult: BtcUnifiedReceiveResult | null;
1313
- copied: boolean;
1325
+ /** Last-copied value (or null). Per-row matching prevents the "Copied"
1326
+ affordance from appearing on every address row when only one was
1327
+ clicked. */
1328
+ copied: string | null;
1314
1329
  handleAmountChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
1315
1330
  generateInvoice: () => Promise<void>;
1316
1331
  copyToClipboard: (text: string) => Promise<void>;
package/dist/web/index.js CHANGED
@@ -6271,7 +6271,7 @@ function BtcUnifiedReceive({
6271
6271
  type: "text",
6272
6272
  value: amount,
6273
6273
  onChange: handleAmountChange,
6274
- placeholder: "Any amount (amountless)",
6274
+ placeholder: "Any amount",
6275
6275
  className: "w-full rounded-lg border bg-white/5 px-3 py-1.5 font-mono text-xs font-bold text-white transition-all placeholder:text-white/25 focus:border-primary/40 focus:outline-none",
6276
6276
  inputMode: "decimal"
6277
6277
  }
@@ -6296,24 +6296,27 @@ function BtcUnifiedReceive({
6296
6296
  ]
6297
6297
  }
6298
6298
  ),
6299
- /* @__PURE__ */ jsxs46(
6300
- "button",
6301
- {
6302
- type: "button",
6303
- className: cn(
6304
- "flex items-center gap-1 rounded-full border px-2.5 py-1 text-xxs font-bold uppercase tracking-widest transition-all",
6305
- copied ? "border-primary/30 bg-primary/10 text-primary" : "border-border bg-white/5 text-muted-foreground hover:border-white/20 hover:bg-accent hover:text-white"
6306
- ),
6307
- onClick: (event) => {
6308
- event.stopPropagation();
6309
- void copyToClipboard(accountReceiveResult.qrValue);
6310
- },
6311
- children: [
6312
- /* @__PURE__ */ jsx60(Icon2, { name: copied ? "check" : "content_copy", size: "xs" }),
6313
- copied ? "Copied" : `Copy ${accountReceiveResult.qrLabel}`
6314
- ]
6315
- }
6316
- )
6299
+ (() => {
6300
+ const isQrCopied = copied === accountReceiveResult.qrValue;
6301
+ return /* @__PURE__ */ jsxs46(
6302
+ "button",
6303
+ {
6304
+ type: "button",
6305
+ className: cn(
6306
+ "flex items-center gap-1 rounded-full border px-2.5 py-1 text-xxs font-bold uppercase tracking-widest transition-all",
6307
+ isQrCopied ? "border-primary/30 bg-primary/10 text-primary" : "border-border bg-white/5 text-muted-foreground hover:border-white/20 hover:bg-accent hover:text-white"
6308
+ ),
6309
+ onClick: (event) => {
6310
+ event.stopPropagation();
6311
+ void copyToClipboard(accountReceiveResult.qrValue);
6312
+ },
6313
+ children: [
6314
+ /* @__PURE__ */ jsx60(Icon2, { name: isQrCopied ? "check" : "content_copy", size: "xs" }),
6315
+ isQrCopied ? "Copied" : `Copy ${accountReceiveResult.qrLabel}`
6316
+ ]
6317
+ }
6318
+ );
6319
+ })()
6317
6320
  ] }),
6318
6321
  invoiceStatus && /* @__PURE__ */ jsx60(
6319
6322
  InvoiceStatusBanner,
@@ -6350,7 +6353,7 @@ function BtcUnifiedReceive({
6350
6353
  ] }),
6351
6354
  /* @__PURE__ */ jsx60("p", { className: "mt-0.5 truncate font-mono text-tiny text-muted-foreground", children: address.value.length > 50 ? `${address.value.slice(0, 18)}...${address.value.slice(-14)}` : address.value })
6352
6355
  ] }),
6353
- /* @__PURE__ */ jsx60(CopyIcon, { copied })
6356
+ /* @__PURE__ */ jsx60(CopyIcon, { copied: copied === address.value })
6354
6357
  ]
6355
6358
  },
6356
6359
  address.network
@@ -6442,7 +6445,7 @@ function DepositGeneratedView({
6442
6445
  type: "text",
6443
6446
  value: amount,
6444
6447
  onChange: handleAmountChange,
6445
- placeholder: "Any amount (amountless)",
6448
+ placeholder: "Any amount",
6446
6449
  className: "w-full rounded-lg border bg-white/5 px-3 py-1.5 font-mono text-xs font-bold text-white transition-all placeholder:text-white/25 focus:border-warning/40 focus:outline-none",
6447
6450
  inputMode: "decimal"
6448
6451
  }
@@ -6462,7 +6465,7 @@ function DepositGeneratedView({
6462
6465
  type: "text",
6463
6466
  value: amount,
6464
6467
  onChange: handleAmountChange,
6465
- placeholder: `Any amount (${selectedAsset?.ticker ?? "amountless"})`,
6468
+ placeholder: selectedAsset?.ticker ? `Any amount (${selectedAsset.ticker})` : "Any amount",
6466
6469
  className: "w-full rounded-lg border bg-white/5 px-3 py-1.5 font-mono text-xs font-bold text-white transition-all placeholder:text-white/25 focus:border-warning/40 focus:outline-none",
6467
6470
  inputMode: "decimal"
6468
6471
  }
@@ -6510,24 +6513,27 @@ function DepositGeneratedView({
6510
6513
  ]
6511
6514
  }
6512
6515
  ),
6513
- /* @__PURE__ */ jsxs47(
6514
- "button",
6515
- {
6516
- type: "button",
6517
- className: cn(
6518
- "flex items-center gap-1 rounded-full border px-2.5 py-1 text-xxs font-bold uppercase tracking-widest transition-all",
6519
- copied ? "border-primary/30 bg-primary/10 text-primary" : "border-border bg-white/5 text-muted-foreground hover:border-white/20 hover:bg-accent hover:text-white"
6520
- ),
6521
- onClick: (event) => {
6522
- event.stopPropagation();
6523
- void copyToClipboard(address);
6524
- },
6525
- children: [
6526
- /* @__PURE__ */ jsx61(Icon2, { name: copied ? "check" : "content_copy", size: "xs" }),
6527
- copied ? "Copied" : network === "lightning" ? "Copy Invoice" : "Copy Address"
6528
- ]
6529
- }
6530
- )
6516
+ (() => {
6517
+ const isAddressCopied = copied === address;
6518
+ return /* @__PURE__ */ jsxs47(
6519
+ "button",
6520
+ {
6521
+ type: "button",
6522
+ className: cn(
6523
+ "flex items-center gap-1 rounded-full border px-2.5 py-1 text-xxs font-bold uppercase tracking-widest transition-all",
6524
+ isAddressCopied ? "border-primary/30 bg-primary/10 text-primary" : "border-border bg-white/5 text-muted-foreground hover:border-white/20 hover:bg-accent hover:text-white"
6525
+ ),
6526
+ onClick: (event) => {
6527
+ event.stopPropagation();
6528
+ void copyToClipboard(address);
6529
+ },
6530
+ children: [
6531
+ /* @__PURE__ */ jsx61(Icon2, { name: isAddressCopied ? "check" : "content_copy", size: "xs" }),
6532
+ isAddressCopied ? "Copied" : network === "lightning" ? "Copy Invoice" : "Copy Address"
6533
+ ]
6534
+ }
6535
+ );
6536
+ })()
6531
6537
  ] }),
6532
6538
  network === "lightning" && invoiceStatus && /* @__PURE__ */ jsx61(
6533
6539
  InvoiceStatusBanner,
@@ -6556,7 +6562,7 @@ function DepositGeneratedView({
6556
6562
  /* @__PURE__ */ jsx61("p", { className: cn("text-xxs font-bold uppercase tracking-widest", net.text), children: /* @__PURE__ */ jsx61("span", { "data-testid": "deposit-address-label", children: addressLabel }) }),
6557
6563
  /* @__PURE__ */ jsx61("p", { className: "mt-0.5 truncate font-mono text-tiny text-muted-foreground", children: address.length > 50 ? `${address.slice(0, 18)}...${address.slice(-14)}` : address })
6558
6564
  ] }),
6559
- /* @__PURE__ */ jsx61(CopyIcon, { copied })
6565
+ /* @__PURE__ */ jsx61(CopyIcon, { copied: copied === address })
6560
6566
  ]
6561
6567
  }
6562
6568
  ),
@@ -6575,7 +6581,7 @@ function DepositGeneratedView({
6575
6581
  /* @__PURE__ */ jsx61("p", { className: "text-xxs font-bold uppercase tracking-widest text-primary", children: "Recipient ID" }),
6576
6582
  /* @__PURE__ */ jsx61("p", { className: "mt-0.5 truncate font-mono text-tiny text-muted-foreground", children: recipientId.length > 50 ? `${recipientId.slice(0, 18)}...${recipientId.slice(-14)}` : recipientId })
6577
6583
  ] }),
6578
- /* @__PURE__ */ jsx61(CopyIcon, { copied })
6584
+ /* @__PURE__ */ jsx61(CopyIcon, { copied: copied === recipientId })
6579
6585
  ]
6580
6586
  }
6581
6587
  ),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kaleido-ui",
3
- "version": "0.1.34",
3
+ "version": "0.1.36",
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",