kaleido-ui 0.1.76 → 0.1.77
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.
- package/dist/web/index.cjs +655 -626
- package/dist/web/index.d.cts +17 -1
- package/dist/web/index.d.ts +17 -1
- package/dist/web/index.js +654 -626
- package/package.json +1 -1
package/dist/web/index.cjs
CHANGED
|
@@ -147,6 +147,7 @@ __export(web_exports, {
|
|
|
147
147
|
StepperNumberInput: () => StepperNumberInput,
|
|
148
148
|
SwapInputCard: () => SwapInputCard,
|
|
149
149
|
Switch: () => Switch,
|
|
150
|
+
SwitchRow: () => SwitchRow,
|
|
150
151
|
Tabs: () => Tabs,
|
|
151
152
|
TabsContent: () => TabsContent,
|
|
152
153
|
TabsList: () => TabsList,
|
|
@@ -5473,10 +5474,37 @@ function SettingItem({
|
|
|
5473
5474
|
);
|
|
5474
5475
|
}
|
|
5475
5476
|
|
|
5476
|
-
// src/web/components/
|
|
5477
|
+
// src/web/components/switch-row.tsx
|
|
5477
5478
|
var import_jsx_runtime54 = require("react/jsx-runtime");
|
|
5479
|
+
function SwitchRow({
|
|
5480
|
+
label,
|
|
5481
|
+
description,
|
|
5482
|
+
checked,
|
|
5483
|
+
disabled,
|
|
5484
|
+
onCheckedChange,
|
|
5485
|
+
className
|
|
5486
|
+
}) {
|
|
5487
|
+
return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: cn("flex items-start justify-between gap-3 rounded-xl bg-muted/40 p-3", className), children: [
|
|
5488
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "min-w-0", children: [
|
|
5489
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "text-sm font-medium text-foreground", children: label }),
|
|
5490
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "mt-0.5 text-xs leading-snug text-muted-foreground", children: description })
|
|
5491
|
+
] }),
|
|
5492
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
|
|
5493
|
+
Switch,
|
|
5494
|
+
{
|
|
5495
|
+
checked,
|
|
5496
|
+
disabled,
|
|
5497
|
+
onCheckedChange,
|
|
5498
|
+
"aria-label": label
|
|
5499
|
+
}
|
|
5500
|
+
)
|
|
5501
|
+
] });
|
|
5502
|
+
}
|
|
5503
|
+
|
|
5504
|
+
// src/web/components/section-label.tsx
|
|
5505
|
+
var import_jsx_runtime55 = require("react/jsx-runtime");
|
|
5478
5506
|
function SectionLabel({ children, className }) {
|
|
5479
|
-
return /* @__PURE__ */ (0,
|
|
5507
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
5480
5508
|
"span",
|
|
5481
5509
|
{
|
|
5482
5510
|
className: cn("text-xxs font-black uppercase tracking-eyebrow-wide text-muted-foreground", className),
|
|
@@ -5486,21 +5514,21 @@ function SectionLabel({ children, className }) {
|
|
|
5486
5514
|
}
|
|
5487
5515
|
|
|
5488
5516
|
// src/web/components/section-header.tsx
|
|
5489
|
-
var
|
|
5517
|
+
var import_jsx_runtime56 = require("react/jsx-runtime");
|
|
5490
5518
|
function SectionHeader({
|
|
5491
5519
|
children,
|
|
5492
5520
|
right,
|
|
5493
5521
|
as: Tag = "h2",
|
|
5494
5522
|
className
|
|
5495
5523
|
}) {
|
|
5496
|
-
return /* @__PURE__ */ (0,
|
|
5497
|
-
/* @__PURE__ */ (0,
|
|
5524
|
+
return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: cn("flex items-center justify-between gap-3 px-1", className), children: [
|
|
5525
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Tag, { className: "text-xs font-bold uppercase tracking-wider text-muted-foreground", children }),
|
|
5498
5526
|
right
|
|
5499
5527
|
] });
|
|
5500
5528
|
}
|
|
5501
5529
|
|
|
5502
5530
|
// src/web/components/alert-banner.tsx
|
|
5503
|
-
var
|
|
5531
|
+
var import_jsx_runtime57 = require("react/jsx-runtime");
|
|
5504
5532
|
var variantStyles = {
|
|
5505
5533
|
error: { container: "bg-danger/40", icon: "text-danger", iconName: "error" },
|
|
5506
5534
|
warning: { container: "bg-warning/40", icon: "text-warning", iconName: "warning" },
|
|
@@ -5509,14 +5537,14 @@ var variantStyles = {
|
|
|
5509
5537
|
};
|
|
5510
5538
|
function AlertBanner({ variant = "info", icon, children, className }) {
|
|
5511
5539
|
const styles = variantStyles[variant];
|
|
5512
|
-
return /* @__PURE__ */ (0,
|
|
5513
|
-
/* @__PURE__ */ (0,
|
|
5514
|
-
/* @__PURE__ */ (0,
|
|
5540
|
+
return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: cn("rounded-xl p-3 flex items-center gap-2", styles.container, className), children: [
|
|
5541
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Icon, { name: icon ?? styles.iconName, size: "md", className: cn("shrink-0", styles.icon) }),
|
|
5542
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: cn("text-sm", styles.icon), children })
|
|
5515
5543
|
] });
|
|
5516
5544
|
}
|
|
5517
5545
|
|
|
5518
5546
|
// src/web/components/info-panel.tsx
|
|
5519
|
-
var
|
|
5547
|
+
var import_jsx_runtime58 = require("react/jsx-runtime");
|
|
5520
5548
|
var toneClass = {
|
|
5521
5549
|
default: {
|
|
5522
5550
|
panel: "border-white/8 bg-white/[0.03]",
|
|
@@ -5557,19 +5585,19 @@ function InfoPanel({
|
|
|
5557
5585
|
className
|
|
5558
5586
|
}) {
|
|
5559
5587
|
const styles = toneClass[tone];
|
|
5560
|
-
const renderedIcon = typeof icon === "string" ? /* @__PURE__ */ (0,
|
|
5561
|
-
return /* @__PURE__ */ (0,
|
|
5588
|
+
const renderedIcon = typeof icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Icon, { name: icon, className: cn("mt-0.5 shrink-0 text-icon-xl", styles.icon) }) : icon;
|
|
5589
|
+
return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: cn("rounded-xl border p-4", styles.panel, className), children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex items-start gap-3", children: [
|
|
5562
5590
|
renderedIcon,
|
|
5563
|
-
/* @__PURE__ */ (0,
|
|
5564
|
-
title && /* @__PURE__ */ (0,
|
|
5565
|
-
/* @__PURE__ */ (0,
|
|
5591
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "min-w-0 flex-1", children: [
|
|
5592
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { className: cn("text-sm font-bold", styles.title), children: title }),
|
|
5593
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: cn("text-xs leading-relaxed", title ? "mt-1" : "", styles.title), children })
|
|
5566
5594
|
] })
|
|
5567
5595
|
] }) });
|
|
5568
5596
|
}
|
|
5569
5597
|
|
|
5570
5598
|
// src/web/components/error-boundary.tsx
|
|
5571
5599
|
var import_react12 = require("react");
|
|
5572
|
-
var
|
|
5600
|
+
var import_jsx_runtime59 = require("react/jsx-runtime");
|
|
5573
5601
|
var ErrorBoundary = class extends import_react12.Component {
|
|
5574
5602
|
constructor(props) {
|
|
5575
5603
|
super(props);
|
|
@@ -5583,11 +5611,11 @@ var ErrorBoundary = class extends import_react12.Component {
|
|
|
5583
5611
|
}
|
|
5584
5612
|
render() {
|
|
5585
5613
|
if (this.state.hasError) {
|
|
5586
|
-
return this.props.fallback ?? /* @__PURE__ */ (0,
|
|
5587
|
-
/* @__PURE__ */ (0,
|
|
5588
|
-
/* @__PURE__ */ (0,
|
|
5589
|
-
/* @__PURE__ */ (0,
|
|
5590
|
-
/* @__PURE__ */ (0,
|
|
5614
|
+
return this.props.fallback ?? /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "min-h-screen bg-background text-foreground font-display flex flex-col items-center justify-center p-6 gap-4", children: [
|
|
5615
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "material-symbols-outlined text-danger text-icon-5xl", children: "error" }),
|
|
5616
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("h2", { className: "text-lg font-bold", children: "Something went wrong" }),
|
|
5617
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { className: "text-sm text-muted-foreground text-center", children: this.state.error?.message ?? "An unexpected error occurred." }),
|
|
5618
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
|
|
5591
5619
|
"button",
|
|
5592
5620
|
{
|
|
5593
5621
|
onClick: () => {
|
|
@@ -5605,7 +5633,7 @@ var ErrorBoundary = class extends import_react12.Component {
|
|
|
5605
5633
|
};
|
|
5606
5634
|
|
|
5607
5635
|
// src/web/components/recovery-phrase-card.tsx
|
|
5608
|
-
var
|
|
5636
|
+
var import_jsx_runtime60 = require("react/jsx-runtime");
|
|
5609
5637
|
function RecoveryPhraseCard({
|
|
5610
5638
|
words,
|
|
5611
5639
|
revealed = false,
|
|
@@ -5616,10 +5644,10 @@ function RecoveryPhraseCard({
|
|
|
5616
5644
|
className
|
|
5617
5645
|
}) {
|
|
5618
5646
|
const hasWords = words.length > 0;
|
|
5619
|
-
return /* @__PURE__ */ (0,
|
|
5620
|
-
/* @__PURE__ */ (0,
|
|
5621
|
-
/* @__PURE__ */ (0,
|
|
5622
|
-
hasWords && revealed && onRevealChange && /* @__PURE__ */ (0,
|
|
5647
|
+
return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("section", { className: cn("space-y-2", className), children: [
|
|
5648
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex items-center justify-between px-0.5", children: [
|
|
5649
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { className: "text-xs font-bold uppercase tracking-wider text-muted-foreground", children: title }),
|
|
5650
|
+
hasWords && revealed && onRevealChange && /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
|
|
5623
5651
|
Button,
|
|
5624
5652
|
{
|
|
5625
5653
|
type: "button",
|
|
@@ -5628,27 +5656,27 @@ function RecoveryPhraseCard({
|
|
|
5628
5656
|
onClick: () => onRevealChange(!revealed),
|
|
5629
5657
|
className: "h-auto rounded-lg px-2 py-1 text-xs text-muted-foreground hover:text-white",
|
|
5630
5658
|
children: [
|
|
5631
|
-
/* @__PURE__ */ (0,
|
|
5659
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icon, { name: "visibility_off", className: "text-icon-md" }),
|
|
5632
5660
|
"Hide"
|
|
5633
5661
|
]
|
|
5634
5662
|
}
|
|
5635
5663
|
)
|
|
5636
5664
|
] }),
|
|
5637
|
-
/* @__PURE__ */ (0,
|
|
5638
|
-
hasWords ? /* @__PURE__ */ (0,
|
|
5665
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "relative", children: [
|
|
5666
|
+
hasWords ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
|
|
5639
5667
|
"div",
|
|
5640
5668
|
{
|
|
5641
5669
|
className: cn(
|
|
5642
5670
|
"grid grid-cols-3 gap-2 transition-all duration-300",
|
|
5643
5671
|
!revealed && "pointer-events-none select-none blur-sm"
|
|
5644
5672
|
),
|
|
5645
|
-
children: words.map((word, index) => /* @__PURE__ */ (0,
|
|
5646
|
-
/* @__PURE__ */ (0,
|
|
5647
|
-
/* @__PURE__ */ (0,
|
|
5673
|
+
children: words.map((word, index) => /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex items-center gap-2 rounded-xl bg-card px-3 py-2.5", children: [
|
|
5674
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "w-4 shrink-0 text-xs font-bold text-muted-foreground", children: index + 1 }),
|
|
5675
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "font-mono text-sm text-white", children: word })
|
|
5648
5676
|
] }, `${index}-${word}`))
|
|
5649
5677
|
}
|
|
5650
|
-
) : /* @__PURE__ */ (0,
|
|
5651
|
-
hasWords && !revealed && onRevealChange && /* @__PURE__ */ (0,
|
|
5678
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "rounded-xl border border-warning/30 bg-warning/10 px-4 py-3 text-sm text-warning", children: emptyMessage }),
|
|
5679
|
+
hasWords && !revealed && onRevealChange && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
|
|
5652
5680
|
Button,
|
|
5653
5681
|
{
|
|
5654
5682
|
type: "button",
|
|
@@ -5656,13 +5684,13 @@ function RecoveryPhraseCard({
|
|
|
5656
5684
|
size: "sm",
|
|
5657
5685
|
onClick: () => onRevealChange(true),
|
|
5658
5686
|
children: [
|
|
5659
|
-
/* @__PURE__ */ (0,
|
|
5687
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icon, { name: "visibility", className: "text-icon-lg" }),
|
|
5660
5688
|
"Tap to reveal"
|
|
5661
5689
|
]
|
|
5662
5690
|
}
|
|
5663
5691
|
) })
|
|
5664
5692
|
] }),
|
|
5665
|
-
hasWords && revealed && onCopy && /* @__PURE__ */ (0,
|
|
5693
|
+
hasWords && revealed && onCopy && /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
|
|
5666
5694
|
Button,
|
|
5667
5695
|
{
|
|
5668
5696
|
type: "button",
|
|
@@ -5671,7 +5699,7 @@ function RecoveryPhraseCard({
|
|
|
5671
5699
|
onClick: onCopy,
|
|
5672
5700
|
className: "w-full",
|
|
5673
5701
|
children: [
|
|
5674
|
-
/* @__PURE__ */ (0,
|
|
5702
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icon, { name: "content_copy", className: "text-icon-lg" }),
|
|
5675
5703
|
"Copy to clipboard"
|
|
5676
5704
|
]
|
|
5677
5705
|
}
|
|
@@ -5680,7 +5708,7 @@ function RecoveryPhraseCard({
|
|
|
5680
5708
|
}
|
|
5681
5709
|
|
|
5682
5710
|
// src/web/components/settings-selector-row.tsx
|
|
5683
|
-
var
|
|
5711
|
+
var import_jsx_runtime61 = require("react/jsx-runtime");
|
|
5684
5712
|
function SettingsSelectorRow({
|
|
5685
5713
|
icon,
|
|
5686
5714
|
title,
|
|
@@ -5689,9 +5717,9 @@ function SettingsSelectorRow({
|
|
|
5689
5717
|
className,
|
|
5690
5718
|
iconClassName
|
|
5691
5719
|
}) {
|
|
5692
|
-
return /* @__PURE__ */ (0,
|
|
5693
|
-
/* @__PURE__ */ (0,
|
|
5694
|
-
/* @__PURE__ */ (0,
|
|
5720
|
+
return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: cn("flex items-start justify-between gap-3 rounded-2xl bg-card p-5", className), children: [
|
|
5721
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex min-w-0 flex-1 items-start gap-3", children: [
|
|
5722
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
|
|
5695
5723
|
"div",
|
|
5696
5724
|
{
|
|
5697
5725
|
className: cn(
|
|
@@ -5701,17 +5729,17 @@ function SettingsSelectorRow({
|
|
|
5701
5729
|
children: icon
|
|
5702
5730
|
}
|
|
5703
5731
|
),
|
|
5704
|
-
/* @__PURE__ */ (0,
|
|
5705
|
-
/* @__PURE__ */ (0,
|
|
5706
|
-
description && /* @__PURE__ */ (0,
|
|
5732
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col", children: [
|
|
5733
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "text-body font-bold tracking-wide text-foreground", children: title }),
|
|
5734
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "mt-0.5 text-sm font-medium text-muted-foreground", children: description })
|
|
5707
5735
|
] })
|
|
5708
5736
|
] }),
|
|
5709
|
-
/* @__PURE__ */ (0,
|
|
5737
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "shrink-0", children: control })
|
|
5710
5738
|
] });
|
|
5711
5739
|
}
|
|
5712
5740
|
|
|
5713
5741
|
// src/web/components/bottom-sheet.tsx
|
|
5714
|
-
var
|
|
5742
|
+
var import_jsx_runtime62 = require("react/jsx-runtime");
|
|
5715
5743
|
function BottomSheet({
|
|
5716
5744
|
open,
|
|
5717
5745
|
title,
|
|
@@ -5727,7 +5755,7 @@ function BottomSheet({
|
|
|
5727
5755
|
const handleBackdropClick = (event) => {
|
|
5728
5756
|
if (closeOnBackdrop && event.target === event.currentTarget) onClose?.();
|
|
5729
5757
|
};
|
|
5730
|
-
return /* @__PURE__ */ (0,
|
|
5758
|
+
return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
|
|
5731
5759
|
"div",
|
|
5732
5760
|
{
|
|
5733
5761
|
className: cn(
|
|
@@ -5735,7 +5763,7 @@ function BottomSheet({
|
|
|
5735
5763
|
className
|
|
5736
5764
|
),
|
|
5737
5765
|
onClick: handleBackdropClick,
|
|
5738
|
-
children: /* @__PURE__ */ (0,
|
|
5766
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
|
|
5739
5767
|
"div",
|
|
5740
5768
|
{
|
|
5741
5769
|
className: cn(
|
|
@@ -5743,13 +5771,13 @@ function BottomSheet({
|
|
|
5743
5771
|
contentClassName
|
|
5744
5772
|
),
|
|
5745
5773
|
children: [
|
|
5746
|
-
/* @__PURE__ */ (0,
|
|
5747
|
-
(title || icon) && /* @__PURE__ */ (0,
|
|
5774
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "-mt-1 flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "h-1 w-10 rounded-full bg-white/15" }) }),
|
|
5775
|
+
(title || icon) && /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "mt-4 flex items-center gap-2", children: [
|
|
5748
5776
|
icon,
|
|
5749
|
-
/* @__PURE__ */ (0,
|
|
5777
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { className: "text-sm font-bold text-foreground", children: title })
|
|
5750
5778
|
] }),
|
|
5751
|
-
/* @__PURE__ */ (0,
|
|
5752
|
-
actions && actions.length > 0 && /* @__PURE__ */ (0,
|
|
5779
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: cn((title || icon) && "mt-3"), children }),
|
|
5780
|
+
actions && actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "mt-4 flex gap-2", children: actions.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
|
|
5753
5781
|
Button,
|
|
5754
5782
|
{
|
|
5755
5783
|
type: "button",
|
|
@@ -5759,7 +5787,7 @@ function BottomSheet({
|
|
|
5759
5787
|
onClick: action.onClick,
|
|
5760
5788
|
disabled: action.disabled,
|
|
5761
5789
|
children: [
|
|
5762
|
-
action.icon && /* @__PURE__ */ (0,
|
|
5790
|
+
action.icon && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Icon, { name: action.icon, className: "text-icon-md" }),
|
|
5763
5791
|
action.label
|
|
5764
5792
|
]
|
|
5765
5793
|
},
|
|
@@ -5773,7 +5801,7 @@ function BottomSheet({
|
|
|
5773
5801
|
}
|
|
5774
5802
|
|
|
5775
5803
|
// src/web/components/disclosure-card.tsx
|
|
5776
|
-
var
|
|
5804
|
+
var import_jsx_runtime63 = require("react/jsx-runtime");
|
|
5777
5805
|
function DisclosureCard({
|
|
5778
5806
|
title,
|
|
5779
5807
|
children,
|
|
@@ -5784,8 +5812,8 @@ function DisclosureCard({
|
|
|
5784
5812
|
triggerClassName,
|
|
5785
5813
|
contentClassName
|
|
5786
5814
|
}) {
|
|
5787
|
-
return /* @__PURE__ */ (0,
|
|
5788
|
-
/* @__PURE__ */ (0,
|
|
5815
|
+
return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className, children: [
|
|
5816
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
|
|
5789
5817
|
"button",
|
|
5790
5818
|
{
|
|
5791
5819
|
type: "button",
|
|
@@ -5795,11 +5823,11 @@ function DisclosureCard({
|
|
|
5795
5823
|
triggerClassName
|
|
5796
5824
|
),
|
|
5797
5825
|
children: [
|
|
5798
|
-
/* @__PURE__ */ (0,
|
|
5826
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("span", { className: "flex min-w-0 items-center gap-1.5", children: [
|
|
5799
5827
|
icon,
|
|
5800
|
-
/* @__PURE__ */ (0,
|
|
5828
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "truncate text-xs font-bold text-foreground", children: title })
|
|
5801
5829
|
] }),
|
|
5802
|
-
/* @__PURE__ */ (0,
|
|
5830
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
|
|
5803
5831
|
Icon,
|
|
5804
5832
|
{
|
|
5805
5833
|
name: open ? "expand_less" : "expand_more",
|
|
@@ -5809,7 +5837,7 @@ function DisclosureCard({
|
|
|
5809
5837
|
]
|
|
5810
5838
|
}
|
|
5811
5839
|
),
|
|
5812
|
-
open && /* @__PURE__ */ (0,
|
|
5840
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
|
|
5813
5841
|
"div",
|
|
5814
5842
|
{
|
|
5815
5843
|
className: cn(
|
|
@@ -5823,7 +5851,7 @@ function DisclosureCard({
|
|
|
5823
5851
|
}
|
|
5824
5852
|
|
|
5825
5853
|
// src/web/components/stepper-number-input.tsx
|
|
5826
|
-
var
|
|
5854
|
+
var import_jsx_runtime64 = require("react/jsx-runtime");
|
|
5827
5855
|
function StepperNumberInput({
|
|
5828
5856
|
value,
|
|
5829
5857
|
onChange,
|
|
@@ -5840,7 +5868,7 @@ function StepperNumberInput({
|
|
|
5840
5868
|
const bounded = max === void 0 ? boundedMin : Math.min(max, boundedMin);
|
|
5841
5869
|
onChange(Number.isFinite(bounded) ? bounded : min ?? 0);
|
|
5842
5870
|
};
|
|
5843
|
-
return /* @__PURE__ */ (0,
|
|
5871
|
+
return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
|
|
5844
5872
|
"div",
|
|
5845
5873
|
{
|
|
5846
5874
|
className: cn(
|
|
@@ -5848,7 +5876,7 @@ function StepperNumberInput({
|
|
|
5848
5876
|
className
|
|
5849
5877
|
),
|
|
5850
5878
|
children: [
|
|
5851
|
-
/* @__PURE__ */ (0,
|
|
5879
|
+
/* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
|
|
5852
5880
|
"button",
|
|
5853
5881
|
{
|
|
5854
5882
|
type: "button",
|
|
@@ -5856,10 +5884,10 @@ function StepperNumberInput({
|
|
|
5856
5884
|
disabled: disabled || min !== void 0 && value <= min,
|
|
5857
5885
|
onClick: () => clamp(value - step),
|
|
5858
5886
|
"aria-label": "Decrease",
|
|
5859
|
-
children: /* @__PURE__ */ (0,
|
|
5887
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Icon, { name: "remove", className: "text-icon-md" })
|
|
5860
5888
|
}
|
|
5861
5889
|
),
|
|
5862
|
-
/* @__PURE__ */ (0,
|
|
5890
|
+
/* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
|
|
5863
5891
|
"input",
|
|
5864
5892
|
{
|
|
5865
5893
|
type: "number",
|
|
@@ -5876,7 +5904,7 @@ function StepperNumberInput({
|
|
|
5876
5904
|
)
|
|
5877
5905
|
}
|
|
5878
5906
|
),
|
|
5879
|
-
/* @__PURE__ */ (0,
|
|
5907
|
+
/* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
|
|
5880
5908
|
"button",
|
|
5881
5909
|
{
|
|
5882
5910
|
type: "button",
|
|
@@ -5884,7 +5912,7 @@ function StepperNumberInput({
|
|
|
5884
5912
|
disabled: disabled || max !== void 0 && value >= max,
|
|
5885
5913
|
onClick: () => clamp(value + step),
|
|
5886
5914
|
"aria-label": "Increase",
|
|
5887
|
-
children: /* @__PURE__ */ (0,
|
|
5915
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Icon, { name: "add", className: "text-icon-md" })
|
|
5888
5916
|
}
|
|
5889
5917
|
)
|
|
5890
5918
|
]
|
|
@@ -5893,7 +5921,7 @@ function StepperNumberInput({
|
|
|
5893
5921
|
}
|
|
5894
5922
|
|
|
5895
5923
|
// src/web/components/metric-card.tsx
|
|
5896
|
-
var
|
|
5924
|
+
var import_jsx_runtime65 = require("react/jsx-runtime");
|
|
5897
5925
|
var toneClasses2 = {
|
|
5898
5926
|
primary: "border-primary/20 bg-primary/10 text-primary",
|
|
5899
5927
|
purple: "border-network-arkade/20 bg-network-arkade/10 text-network-arkade",
|
|
@@ -5911,27 +5939,27 @@ function MetricCard({
|
|
|
5911
5939
|
tone = "muted",
|
|
5912
5940
|
className
|
|
5913
5941
|
}) {
|
|
5914
|
-
return /* @__PURE__ */ (0,
|
|
5915
|
-
/* @__PURE__ */ (0,
|
|
5916
|
-
icon && /* @__PURE__ */ (0,
|
|
5917
|
-
/* @__PURE__ */ (0,
|
|
5942
|
+
return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: cn("space-y-1 rounded-xl border border-white/8 bg-white/3 p-2.5", className), children: [
|
|
5943
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex items-center gap-1.5", children: [
|
|
5944
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: cn("flex size-5 items-center justify-center rounded-md", toneClasses2[tone]), children: typeof icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Icon, { name: icon, className: "text-icon-xs" }) : icon }),
|
|
5945
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "text-xxs font-bold uppercase tracking-widest text-white/45", children: label })
|
|
5918
5946
|
] }),
|
|
5919
|
-
/* @__PURE__ */ (0,
|
|
5920
|
-
description && /* @__PURE__ */ (0,
|
|
5947
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)("p", { className: "font-mono text-sm font-bold text-foreground", children: value }),
|
|
5948
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("p", { className: "text-xxs text-white/45", children: description })
|
|
5921
5949
|
] });
|
|
5922
5950
|
}
|
|
5923
5951
|
|
|
5924
5952
|
// src/web/components/filter-chip-group.tsx
|
|
5925
|
-
var
|
|
5953
|
+
var import_jsx_runtime66 = require("react/jsx-runtime");
|
|
5926
5954
|
function FilterChipGroup({
|
|
5927
5955
|
options,
|
|
5928
5956
|
value,
|
|
5929
5957
|
onChange,
|
|
5930
5958
|
className
|
|
5931
5959
|
}) {
|
|
5932
|
-
return /* @__PURE__ */ (0,
|
|
5960
|
+
return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: cn("flex gap-1.5 overflow-x-auto no-scrollbar", className), children: options.map((option) => {
|
|
5933
5961
|
const active = option.value === value;
|
|
5934
|
-
return /* @__PURE__ */ (0,
|
|
5962
|
+
return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
|
|
5935
5963
|
"button",
|
|
5936
5964
|
{
|
|
5937
5965
|
type: "button",
|
|
@@ -5945,7 +5973,7 @@ function FilterChipGroup({
|
|
|
5945
5973
|
children: [
|
|
5946
5974
|
option.icon,
|
|
5947
5975
|
option.label,
|
|
5948
|
-
option.count !== void 0 && /* @__PURE__ */ (0,
|
|
5976
|
+
option.count !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
|
|
5949
5977
|
"span",
|
|
5950
5978
|
{
|
|
5951
5979
|
className: cn(
|
|
@@ -5963,7 +5991,7 @@ function FilterChipGroup({
|
|
|
5963
5991
|
}
|
|
5964
5992
|
|
|
5965
5993
|
// src/web/components/activity-row.tsx
|
|
5966
|
-
var
|
|
5994
|
+
var import_jsx_runtime67 = require("react/jsx-runtime");
|
|
5967
5995
|
var directionUi = {
|
|
5968
5996
|
inbound: { icon: "south_west", iconClass: "bg-primary/20 text-primary", amountClass: "text-primary", sign: "+" },
|
|
5969
5997
|
outbound: { icon: "north_east", iconClass: "bg-white/10 text-muted-foreground", amountClass: "text-foreground", sign: "-" },
|
|
@@ -5983,26 +6011,26 @@ function ActivityRow({
|
|
|
5983
6011
|
className
|
|
5984
6012
|
}) {
|
|
5985
6013
|
const ui = directionUi[direction];
|
|
5986
|
-
const content = /* @__PURE__ */ (0,
|
|
5987
|
-
/* @__PURE__ */ (0,
|
|
5988
|
-
/* @__PURE__ */ (0,
|
|
5989
|
-
/* @__PURE__ */ (0,
|
|
5990
|
-
/* @__PURE__ */ (0,
|
|
5991
|
-
/* @__PURE__ */ (0,
|
|
6014
|
+
const content = /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
|
|
6015
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex min-w-0 items-center gap-3", children: [
|
|
6016
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: cn("flex size-10 shrink-0 items-center justify-center rounded-xl shadow-inner", ui.iconClass), children: typeof icon === "string" || !icon ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Icon, { name: icon ?? ui.icon, className: "text-icon-xl" }) : icon }),
|
|
6017
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex min-w-0 flex-col", children: [
|
|
6018
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex min-w-0 items-center gap-1.5", children: [
|
|
6019
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "truncate text-sm font-bold tracking-wide text-foreground", children: title }),
|
|
5992
6020
|
networkBadge
|
|
5993
6021
|
] }),
|
|
5994
|
-
(status || timestamp) && /* @__PURE__ */ (0,
|
|
5995
|
-
status && /* @__PURE__ */ (0,
|
|
5996
|
-
timestamp && /* @__PURE__ */ (0,
|
|
6022
|
+
(status || timestamp) && /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "mt-1 flex items-center gap-2", children: [
|
|
6023
|
+
status && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(StatusBadge, { status, className: "px-1.5 py-0.5 text-xxs" }),
|
|
6024
|
+
timestamp && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "text-xxs text-muted-foreground", children: timestamp })
|
|
5997
6025
|
] })
|
|
5998
6026
|
] })
|
|
5999
6027
|
] }),
|
|
6000
|
-
/* @__PURE__ */ (0,
|
|
6001
|
-
/* @__PURE__ */ (0,
|
|
6028
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "shrink-0 text-right", children: [
|
|
6029
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("p", { className: cn("text-sm font-bold tracking-wide", ui.amountClass), children: [
|
|
6002
6030
|
ui.sign,
|
|
6003
6031
|
amount
|
|
6004
6032
|
] }),
|
|
6005
|
-
unit && /* @__PURE__ */ (0,
|
|
6033
|
+
unit && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { className: "mt-0.5 text-xxs font-bold uppercase tracking-wider text-muted-foreground", children: unit })
|
|
6006
6034
|
] })
|
|
6007
6035
|
] });
|
|
6008
6036
|
const rowClassName = cn(
|
|
@@ -6011,23 +6039,23 @@ function ActivityRow({
|
|
|
6011
6039
|
className
|
|
6012
6040
|
);
|
|
6013
6041
|
if (onClick) {
|
|
6014
|
-
return /* @__PURE__ */ (0,
|
|
6042
|
+
return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("button", { type: "button", onClick, className: rowClassName, children: content });
|
|
6015
6043
|
}
|
|
6016
|
-
return /* @__PURE__ */ (0,
|
|
6044
|
+
return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: rowClassName, children: content });
|
|
6017
6045
|
}
|
|
6018
6046
|
|
|
6019
6047
|
// src/web/components/skeleton.tsx
|
|
6020
|
-
var
|
|
6048
|
+
var import_jsx_runtime68 = require("react/jsx-runtime");
|
|
6021
6049
|
var toneClass2 = {
|
|
6022
6050
|
primary: "bg-white/10",
|
|
6023
6051
|
secondary: "bg-white/5",
|
|
6024
6052
|
card: "bg-white/[0.06]"
|
|
6025
6053
|
};
|
|
6026
6054
|
function Skeleton({ className, tone = "primary" }) {
|
|
6027
|
-
return /* @__PURE__ */ (0,
|
|
6055
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { "aria-hidden": true, className: cn("animate-pulse rounded", toneClass2[tone], className) });
|
|
6028
6056
|
}
|
|
6029
6057
|
function ListSkeletonRows({ rows = 3, className, rowClassName }) {
|
|
6030
|
-
return /* @__PURE__ */ (0,
|
|
6058
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: cn("space-y-2", className), children: Array.from({ length: rows }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
|
|
6031
6059
|
"div",
|
|
6032
6060
|
{
|
|
6033
6061
|
className: cn(
|
|
@@ -6035,14 +6063,14 @@ function ListSkeletonRows({ rows = 3, className, rowClassName }) {
|
|
|
6035
6063
|
rowClassName
|
|
6036
6064
|
),
|
|
6037
6065
|
children: [
|
|
6038
|
-
/* @__PURE__ */ (0,
|
|
6039
|
-
/* @__PURE__ */ (0,
|
|
6040
|
-
/* @__PURE__ */ (0,
|
|
6041
|
-
/* @__PURE__ */ (0,
|
|
6066
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Skeleton, { className: "size-10 shrink-0 rounded-xl" }),
|
|
6067
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex-1 space-y-2", children: [
|
|
6068
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Skeleton, { className: "h-3 w-28" }),
|
|
6069
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Skeleton, { tone: "secondary", className: "h-2.5 w-20" })
|
|
6042
6070
|
] }),
|
|
6043
|
-
/* @__PURE__ */ (0,
|
|
6044
|
-
/* @__PURE__ */ (0,
|
|
6045
|
-
/* @__PURE__ */ (0,
|
|
6071
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex flex-col items-end space-y-1.5", children: [
|
|
6072
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Skeleton, { className: "h-3 w-14" }),
|
|
6073
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Skeleton, { tone: "secondary", className: "h-2 w-10" })
|
|
6046
6074
|
] })
|
|
6047
6075
|
]
|
|
6048
6076
|
},
|
|
@@ -6051,7 +6079,7 @@ function ListSkeletonRows({ rows = 3, className, rowClassName }) {
|
|
|
6051
6079
|
}
|
|
6052
6080
|
|
|
6053
6081
|
// src/web/components/secret-reveal-card.tsx
|
|
6054
|
-
var
|
|
6082
|
+
var import_jsx_runtime69 = require("react/jsx-runtime");
|
|
6055
6083
|
function SecretRevealCard({
|
|
6056
6084
|
value,
|
|
6057
6085
|
revealed,
|
|
@@ -6063,9 +6091,9 @@ function SecretRevealCard({
|
|
|
6063
6091
|
className,
|
|
6064
6092
|
valueClassName
|
|
6065
6093
|
}) {
|
|
6066
|
-
return /* @__PURE__ */ (0,
|
|
6067
|
-
/* @__PURE__ */ (0,
|
|
6068
|
-
/* @__PURE__ */ (0,
|
|
6094
|
+
return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: cn("space-y-3", className), children: [
|
|
6095
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "relative", children: [
|
|
6096
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "rounded-xl bg-card px-3 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
6069
6097
|
"p",
|
|
6070
6098
|
{
|
|
6071
6099
|
className: cn(
|
|
@@ -6076,40 +6104,40 @@ function SecretRevealCard({
|
|
|
6076
6104
|
children: value
|
|
6077
6105
|
}
|
|
6078
6106
|
) }),
|
|
6079
|
-
!revealed && /* @__PURE__ */ (0,
|
|
6107
|
+
!revealed && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
|
|
6080
6108
|
"button",
|
|
6081
6109
|
{
|
|
6082
6110
|
type: "button",
|
|
6083
6111
|
onClick: () => onRevealChange(true),
|
|
6084
6112
|
className: "flex items-center gap-2 rounded-xl border border-white/20 bg-card px-4 py-2 text-sm font-bold text-foreground shadow-lg transition-all hover:bg-accent",
|
|
6085
6113
|
children: [
|
|
6086
|
-
/* @__PURE__ */ (0,
|
|
6114
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Icon, { name: "visibility", className: "text-icon-lg" }),
|
|
6087
6115
|
revealLabel
|
|
6088
6116
|
]
|
|
6089
6117
|
}
|
|
6090
6118
|
) })
|
|
6091
6119
|
] }),
|
|
6092
|
-
/* @__PURE__ */ (0,
|
|
6093
|
-
/* @__PURE__ */ (0,
|
|
6120
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "flex gap-2", children: [
|
|
6121
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
|
|
6094
6122
|
"button",
|
|
6095
6123
|
{
|
|
6096
6124
|
type: "button",
|
|
6097
6125
|
onClick: () => onRevealChange(!revealed),
|
|
6098
6126
|
className: "flex flex-1 items-center justify-center gap-2 rounded-xl bg-white/5 py-3 text-sm font-semibold text-muted-foreground transition-all hover:bg-accent hover:text-foreground",
|
|
6099
6127
|
children: [
|
|
6100
|
-
/* @__PURE__ */ (0,
|
|
6128
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Icon, { name: revealed ? "visibility_off" : "visibility", className: "text-icon-lg" }),
|
|
6101
6129
|
revealed ? hideLabel : revealLabel
|
|
6102
6130
|
]
|
|
6103
6131
|
}
|
|
6104
6132
|
),
|
|
6105
|
-
revealed && onCopy && /* @__PURE__ */ (0,
|
|
6133
|
+
revealed && onCopy && /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
|
|
6106
6134
|
"button",
|
|
6107
6135
|
{
|
|
6108
6136
|
type: "button",
|
|
6109
6137
|
onClick: onCopy,
|
|
6110
6138
|
className: "flex flex-1 items-center justify-center gap-2 rounded-xl bg-white/5 py-3 text-sm font-semibold text-muted-foreground transition-all hover:bg-accent hover:text-foreground",
|
|
6111
6139
|
children: [
|
|
6112
|
-
/* @__PURE__ */ (0,
|
|
6140
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Icon, { name: "content_copy", className: "text-icon-lg" }),
|
|
6113
6141
|
copyLabel
|
|
6114
6142
|
]
|
|
6115
6143
|
}
|
|
@@ -6119,7 +6147,7 @@ function SecretRevealCard({
|
|
|
6119
6147
|
}
|
|
6120
6148
|
|
|
6121
6149
|
// src/web/components/settings-section-card.tsx
|
|
6122
|
-
var
|
|
6150
|
+
var import_jsx_runtime70 = require("react/jsx-runtime");
|
|
6123
6151
|
function SettingsSectionCard({
|
|
6124
6152
|
title,
|
|
6125
6153
|
description,
|
|
@@ -6128,15 +6156,15 @@ function SettingsSectionCard({
|
|
|
6128
6156
|
className,
|
|
6129
6157
|
bodyClassName
|
|
6130
6158
|
}) {
|
|
6131
|
-
return /* @__PURE__ */ (0,
|
|
6132
|
-
/* @__PURE__ */ (0,
|
|
6133
|
-
/* @__PURE__ */ (0,
|
|
6134
|
-
/* @__PURE__ */ (0,
|
|
6135
|
-
description && /* @__PURE__ */ (0,
|
|
6159
|
+
return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("section", { className: cn("space-y-4 rounded-xl bg-card p-4", className), children: [
|
|
6160
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "flex items-start justify-between gap-4", children: [
|
|
6161
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "min-w-0 flex-1", children: [
|
|
6162
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)("h2", { className: "text-sm font-bold text-foreground", children: title }),
|
|
6163
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("p", { className: "mt-1 text-xs text-muted-foreground", children: description })
|
|
6136
6164
|
] }),
|
|
6137
6165
|
badge
|
|
6138
6166
|
] }),
|
|
6139
|
-
/* @__PURE__ */ (0,
|
|
6167
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: bodyClassName, children })
|
|
6140
6168
|
] });
|
|
6141
6169
|
}
|
|
6142
6170
|
var badgeToneClass = {
|
|
@@ -6148,7 +6176,7 @@ var badgeToneClass = {
|
|
|
6148
6176
|
muted: "border-white/10 bg-white/[0.05] text-white/55"
|
|
6149
6177
|
};
|
|
6150
6178
|
function ToneBadge({ children, tone = "muted", className }) {
|
|
6151
|
-
return /* @__PURE__ */ (0,
|
|
6179
|
+
return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
|
|
6152
6180
|
"span",
|
|
6153
6181
|
{
|
|
6154
6182
|
className: cn(
|
|
@@ -6162,7 +6190,7 @@ function ToneBadge({ children, tone = "muted", className }) {
|
|
|
6162
6190
|
}
|
|
6163
6191
|
|
|
6164
6192
|
// src/web/components/selectable-card.tsx
|
|
6165
|
-
var
|
|
6193
|
+
var import_jsx_runtime71 = require("react/jsx-runtime");
|
|
6166
6194
|
function SelectableCard({
|
|
6167
6195
|
selected,
|
|
6168
6196
|
onClick,
|
|
@@ -6174,28 +6202,28 @@ function SelectableCard({
|
|
|
6174
6202
|
children,
|
|
6175
6203
|
className
|
|
6176
6204
|
}) {
|
|
6177
|
-
const content = /* @__PURE__ */ (0,
|
|
6178
|
-
/* @__PURE__ */ (0,
|
|
6179
|
-
indicator && /* @__PURE__ */ (0,
|
|
6205
|
+
const content = /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
|
|
6206
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "flex min-w-0 flex-1 items-start gap-3", children: [
|
|
6207
|
+
indicator && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
6180
6208
|
"div",
|
|
6181
6209
|
{
|
|
6182
6210
|
className: cn(
|
|
6183
6211
|
"mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full border-2 transition-colors",
|
|
6184
6212
|
selected ? "border-primary bg-primary" : "border-white/20"
|
|
6185
6213
|
),
|
|
6186
|
-
children: selected && /* @__PURE__ */ (0,
|
|
6214
|
+
children: selected && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "size-2 rounded-full bg-background" })
|
|
6187
6215
|
}
|
|
6188
6216
|
),
|
|
6189
|
-
/* @__PURE__ */ (0,
|
|
6190
|
-
/* @__PURE__ */ (0,
|
|
6191
|
-
/* @__PURE__ */ (0,
|
|
6217
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "min-w-0 flex-1", children: [
|
|
6218
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "flex flex-wrap items-center gap-2", children: [
|
|
6219
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "text-body font-bold text-foreground", children: title }),
|
|
6192
6220
|
badge
|
|
6193
6221
|
] }),
|
|
6194
|
-
description && /* @__PURE__ */ (0,
|
|
6222
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("p", { className: "mt-0.5 text-xs leading-relaxed text-muted-foreground", children: description }),
|
|
6195
6223
|
children
|
|
6196
6224
|
] })
|
|
6197
6225
|
] }),
|
|
6198
|
-
preview && /* @__PURE__ */ (0,
|
|
6226
|
+
preview && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "shrink-0 text-right", children: preview })
|
|
6199
6227
|
] });
|
|
6200
6228
|
const cardClassName = cn(
|
|
6201
6229
|
"w-full rounded-2xl border p-4 text-left transition-all duration-200",
|
|
@@ -6203,14 +6231,14 @@ function SelectableCard({
|
|
|
6203
6231
|
className
|
|
6204
6232
|
);
|
|
6205
6233
|
if (onClick) {
|
|
6206
|
-
return /* @__PURE__ */ (0,
|
|
6234
|
+
return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("button", { type: "button", onClick, className: cardClassName, children: content });
|
|
6207
6235
|
}
|
|
6208
|
-
return /* @__PURE__ */ (0,
|
|
6236
|
+
return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: cardClassName, children: content });
|
|
6209
6237
|
}
|
|
6210
6238
|
|
|
6211
6239
|
// src/web/components/mobile-hero-animation.tsx
|
|
6212
6240
|
var import_react13 = require("react");
|
|
6213
|
-
var
|
|
6241
|
+
var import_jsx_runtime72 = require("react/jsx-runtime");
|
|
6214
6242
|
var PROTOCOLS = [
|
|
6215
6243
|
{ name: "Bitcoin", network: "Bitcoin", iconSuffix: "bitcoin/bitcoin-logo.svg" },
|
|
6216
6244
|
{ name: "Lightning", network: "LN", iconSuffix: "lightning/lightning.svg" },
|
|
@@ -6269,15 +6297,15 @@ var MobileHeroAnimation = ({
|
|
|
6269
6297
|
}, []);
|
|
6270
6298
|
const anim = !reducedMotion && isVisible;
|
|
6271
6299
|
const scale = size / 280;
|
|
6272
|
-
return /* @__PURE__ */ (0,
|
|
6300
|
+
return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
|
|
6273
6301
|
"div",
|
|
6274
6302
|
{
|
|
6275
6303
|
ref: containerRef,
|
|
6276
6304
|
className,
|
|
6277
6305
|
style: { position: "relative", width: size, height: size },
|
|
6278
6306
|
children: [
|
|
6279
|
-
/* @__PURE__ */ (0,
|
|
6280
|
-
/* @__PURE__ */ (0,
|
|
6307
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("style", { children: KEYFRAMES }),
|
|
6308
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { style: {
|
|
6281
6309
|
position: "absolute",
|
|
6282
6310
|
top: 0,
|
|
6283
6311
|
left: 0,
|
|
@@ -6286,7 +6314,7 @@ var MobileHeroAnimation = ({
|
|
|
6286
6314
|
transformOrigin: "top left",
|
|
6287
6315
|
transform: scale !== 1 ? `scale(${scale})` : void 0
|
|
6288
6316
|
}, children: [
|
|
6289
|
-
/* @__PURE__ */ (0,
|
|
6317
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
|
|
6290
6318
|
"svg",
|
|
6291
6319
|
{
|
|
6292
6320
|
viewBox: "0 0 280 280",
|
|
@@ -6295,35 +6323,35 @@ var MobileHeroAnimation = ({
|
|
|
6295
6323
|
style: { position: "absolute", inset: 0 },
|
|
6296
6324
|
xmlns: "http://www.w3.org/2000/svg",
|
|
6297
6325
|
children: [
|
|
6298
|
-
/* @__PURE__ */ (0,
|
|
6299
|
-
/* @__PURE__ */ (0,
|
|
6300
|
-
/* @__PURE__ */ (0,
|
|
6301
|
-
/* @__PURE__ */ (0,
|
|
6302
|
-
/* @__PURE__ */ (0,
|
|
6326
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("defs", { children: [
|
|
6327
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("radialGradient", { id: "mh-center-glow", cx: "50%", cy: "50%", r: "50%", children: [
|
|
6328
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("stop", { offset: "0%", stopColor: "#0e9dff", stopOpacity: "0.3" }),
|
|
6329
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("stop", { offset: "40%", stopColor: "#8a5cf6", stopOpacity: "0.15" }),
|
|
6330
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("stop", { offset: "100%", stopColor: "transparent", stopOpacity: "0" })
|
|
6303
6331
|
] }),
|
|
6304
|
-
/* @__PURE__ */ (0,
|
|
6305
|
-
/* @__PURE__ */ (0,
|
|
6306
|
-
/* @__PURE__ */ (0,
|
|
6332
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("linearGradient", { id: "mh-gp", x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
|
|
6333
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("stop", { offset: "0%", stopColor: "#22c55e" }),
|
|
6334
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("stop", { offset: "100%", stopColor: "#8a5cf6" })
|
|
6307
6335
|
] }),
|
|
6308
|
-
/* @__PURE__ */ (0,
|
|
6309
|
-
/* @__PURE__ */ (0,
|
|
6310
|
-
/* @__PURE__ */ (0,
|
|
6336
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("linearGradient", { id: "mh-bp", x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
|
|
6337
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("stop", { offset: "0%", stopColor: "#0e9dff" }),
|
|
6338
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("stop", { offset: "100%", stopColor: "#8a5cf6" })
|
|
6311
6339
|
] }),
|
|
6312
|
-
/* @__PURE__ */ (0,
|
|
6313
|
-
/* @__PURE__ */ (0,
|
|
6314
|
-
/* @__PURE__ */ (0,
|
|
6315
|
-
/* @__PURE__ */ (0,
|
|
6316
|
-
/* @__PURE__ */ (0,
|
|
6340
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("filter", { id: "mh-glow", x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
|
|
6341
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("feGaussianBlur", { stdDeviation: "2.5", result: "blur" }),
|
|
6342
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("feMerge", { children: [
|
|
6343
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("feMergeNode", { in: "blur" }),
|
|
6344
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("feMergeNode", { in: "SourceGraphic" })
|
|
6317
6345
|
] })
|
|
6318
6346
|
] })
|
|
6319
6347
|
] }),
|
|
6320
|
-
/* @__PURE__ */ (0,
|
|
6321
|
-
/* @__PURE__ */ (0,
|
|
6322
|
-
/* @__PURE__ */ (0,
|
|
6348
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("circle", { cx: C, cy: C, r: ORBIT_R, fill: "none", stroke: "#0e9dff", strokeWidth: "1", strokeOpacity: "0.25", opacity: "0.4", children: anim && /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(import_jsx_runtime72.Fragment, { children: [
|
|
6349
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("animate", { attributeName: "r", values: `${ORBIT_R};${Math.round(ORBIT_R * 1.12)};${ORBIT_R}`, dur: "2.5s", repeatCount: "indefinite" }),
|
|
6350
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("animate", { attributeName: "opacity", values: "0.4;0;0.4", dur: "2.5s", repeatCount: "indefinite" })
|
|
6323
6351
|
] }) }),
|
|
6324
|
-
/* @__PURE__ */ (0,
|
|
6325
|
-
/* @__PURE__ */ (0,
|
|
6326
|
-
anim && /* @__PURE__ */ (0,
|
|
6352
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("circle", { cx: C, cy: C, r: 80, fill: "none", stroke: "rgba(255,255,255,0.1)", strokeWidth: "1", strokeDasharray: "4 4" }),
|
|
6353
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("g", { children: [
|
|
6354
|
+
anim && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
6327
6355
|
"animateTransform",
|
|
6328
6356
|
{
|
|
6329
6357
|
attributeName: "transform",
|
|
@@ -6344,8 +6372,8 @@ var MobileHeroAnimation = ({
|
|
|
6344
6372
|
const y2 = C + dy * (ORBIT_R - BADGE_HALF);
|
|
6345
6373
|
const color = PROTOCOL_COLORS[protocol.network] ?? "#ffffff";
|
|
6346
6374
|
const dur = `${2 + i * 0.3}s`;
|
|
6347
|
-
return /* @__PURE__ */ (0,
|
|
6348
|
-
/* @__PURE__ */ (0,
|
|
6375
|
+
return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("g", { children: [
|
|
6376
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
6349
6377
|
"line",
|
|
6350
6378
|
{
|
|
6351
6379
|
x1,
|
|
@@ -6356,29 +6384,29 @@ var MobileHeroAnimation = ({
|
|
|
6356
6384
|
strokeWidth: "0.8",
|
|
6357
6385
|
strokeDasharray: "2 4",
|
|
6358
6386
|
opacity: "0.25",
|
|
6359
|
-
children: anim && /* @__PURE__ */ (0,
|
|
6387
|
+
children: anim && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("animate", { attributeName: "stroke-dashoffset", from: "0", to: "-12", dur: `${1.5 + i * 0.2}s`, repeatCount: "indefinite" })
|
|
6360
6388
|
}
|
|
6361
6389
|
),
|
|
6362
|
-
/* @__PURE__ */ (0,
|
|
6363
|
-
/* @__PURE__ */ (0,
|
|
6364
|
-
/* @__PURE__ */ (0,
|
|
6365
|
-
/* @__PURE__ */ (0,
|
|
6366
|
-
/* @__PURE__ */ (0,
|
|
6390
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("circle", { r: "2", fill: color, opacity: "0", children: anim && /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(import_jsx_runtime72.Fragment, { children: [
|
|
6391
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("animate", { attributeName: "cx", values: `${x1};${x2}`, dur, repeatCount: "indefinite" }),
|
|
6392
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("animate", { attributeName: "cy", values: `${y1};${y2}`, dur, repeatCount: "indefinite" }),
|
|
6393
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("animate", { attributeName: "opacity", values: "0;0.85;0", dur, repeatCount: "indefinite" }),
|
|
6394
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("animate", { attributeName: "r", values: "1.5;2.5;1.5", dur, repeatCount: "indefinite" })
|
|
6367
6395
|
] }) })
|
|
6368
6396
|
] }, `line-${i}`);
|
|
6369
6397
|
})
|
|
6370
6398
|
] }),
|
|
6371
|
-
/* @__PURE__ */ (0,
|
|
6372
|
-
/* @__PURE__ */ (0,
|
|
6373
|
-
/* @__PURE__ */ (0,
|
|
6374
|
-
/* @__PURE__ */ (0,
|
|
6399
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("circle", { cx: C, cy: C, r: "42", fill: "url(#mh-center-glow)", children: anim && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("animate", { attributeName: "r", values: "38;46;38", dur: "4s", repeatCount: "indefinite" }) }),
|
|
6400
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("circle", { cx: C, cy: C, r: "29", fill: "none", stroke: "url(#mh-bp)", strokeWidth: "1", opacity: "0", children: anim && /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(import_jsx_runtime72.Fragment, { children: [
|
|
6401
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("animate", { attributeName: "r", values: "27;38", dur: "3s", repeatCount: "indefinite" }),
|
|
6402
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("animate", { attributeName: "opacity", values: "0.4;0", dur: "3s", repeatCount: "indefinite" })
|
|
6375
6403
|
] }) }),
|
|
6376
|
-
/* @__PURE__ */ (0,
|
|
6377
|
-
/* @__PURE__ */ (0,
|
|
6378
|
-
/* @__PURE__ */ (0,
|
|
6404
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("circle", { cx: C, cy: C, r: "27", fill: "none", stroke: "url(#mh-gp)", strokeWidth: "0.8", opacity: "0", children: anim && /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(import_jsx_runtime72.Fragment, { children: [
|
|
6405
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("animate", { attributeName: "r", values: "27;36", dur: "3s", repeatCount: "indefinite", begin: "1.5s" }),
|
|
6406
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("animate", { attributeName: "opacity", values: "0.3;0", dur: "3s", repeatCount: "indefinite", begin: "1.5s" })
|
|
6379
6407
|
] }) }),
|
|
6380
|
-
/* @__PURE__ */ (0,
|
|
6381
|
-
anim && /* @__PURE__ */ (0,
|
|
6408
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("g", { transform: `translate(${C},${C})`, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("g", { children: [
|
|
6409
|
+
anim && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
6382
6410
|
"animateTransform",
|
|
6383
6411
|
{
|
|
6384
6412
|
attributeName: "transform",
|
|
@@ -6390,13 +6418,13 @@ var MobileHeroAnimation = ({
|
|
|
6390
6418
|
additive: "sum"
|
|
6391
6419
|
}
|
|
6392
6420
|
),
|
|
6393
|
-
/* @__PURE__ */ (0,
|
|
6394
|
-
/* @__PURE__ */ (0,
|
|
6395
|
-
/* @__PURE__ */ (0,
|
|
6421
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("path", { d: hexPath(34), fill: "none", stroke: "url(#mh-gp)", strokeWidth: "1.5", opacity: "0.4", filter: "url(#mh-glow)", children: anim && /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(import_jsx_runtime72.Fragment, { children: [
|
|
6422
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("animate", { attributeName: "opacity", values: "0.3;0.65;0.3", dur: "3s", repeatCount: "indefinite" }),
|
|
6423
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("animate", { attributeName: "stroke-width", values: "1.5;2.5;1.5", dur: "3s", repeatCount: "indefinite" })
|
|
6396
6424
|
] }) })
|
|
6397
6425
|
] }) }),
|
|
6398
|
-
/* @__PURE__ */ (0,
|
|
6399
|
-
anim && /* @__PURE__ */ (0,
|
|
6426
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("g", { transform: `translate(${C},${C})`, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("g", { children: [
|
|
6427
|
+
anim && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
6400
6428
|
"animateTransform",
|
|
6401
6429
|
{
|
|
6402
6430
|
attributeName: "transform",
|
|
@@ -6408,19 +6436,19 @@ var MobileHeroAnimation = ({
|
|
|
6408
6436
|
additive: "sum"
|
|
6409
6437
|
}
|
|
6410
6438
|
),
|
|
6411
|
-
/* @__PURE__ */ (0,
|
|
6439
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("path", { d: hexPath(32), fill: "rgba(10,15,30,0.75)", stroke: "rgba(255,255,255,0.08)", strokeWidth: "0.5" })
|
|
6412
6440
|
] }) }),
|
|
6413
|
-
/* @__PURE__ */ (0,
|
|
6414
|
-
/* @__PURE__ */ (0,
|
|
6415
|
-
/* @__PURE__ */ (0,
|
|
6416
|
-
/* @__PURE__ */ (0,
|
|
6417
|
-
/* @__PURE__ */ (0,
|
|
6418
|
-
/* @__PURE__ */ (0,
|
|
6441
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("g", { transform: `translate(${C - 18.8},${C - 18.8}) scale(0.0912)`, children: [
|
|
6442
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("path", { d: "M137.306 411.865H0.000244141L68.6795 343.29L137.306 411.865Z", fill: "#6F32FF" }),
|
|
6443
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("path", { d: "M0 0H137.306L68.6267 68.574L0 0Z", fill: "#6F32FF" }),
|
|
6444
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("path", { d: "M137.148 274.559H274.455L411.708 411.866H274.401L137.148 274.559Z", fill: "#17B581" }),
|
|
6445
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("path", { d: "M137.149 274.559L68.6274 205.933L137.201 137.306L274.455 137.411L205.776 206.038L274.456 274.559H137.149Z", fill: "#15E99A" }),
|
|
6446
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("path", { d: "M274.479 0.104797H411.786L274.533 137.411H137.226L274.479 0.104797Z", fill: "#17B581" })
|
|
6419
6447
|
] })
|
|
6420
6448
|
]
|
|
6421
6449
|
}
|
|
6422
6450
|
),
|
|
6423
|
-
/* @__PURE__ */ (0,
|
|
6451
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { style: {
|
|
6424
6452
|
position: "absolute",
|
|
6425
6453
|
inset: 0,
|
|
6426
6454
|
width: 280,
|
|
@@ -6431,7 +6459,7 @@ var MobileHeroAnimation = ({
|
|
|
6431
6459
|
const x = C + Math.cos(angle) * ORBIT_R - BADGE_HALF;
|
|
6432
6460
|
const y = C + Math.sin(angle) * ORBIT_R - BADGE_HALF;
|
|
6433
6461
|
const color = PROTOCOL_COLORS[protocol.network] ?? "#ffffff";
|
|
6434
|
-
return /* @__PURE__ */ (0,
|
|
6462
|
+
return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
6435
6463
|
"div",
|
|
6436
6464
|
{
|
|
6437
6465
|
style: {
|
|
@@ -6442,7 +6470,7 @@ var MobileHeroAnimation = ({
|
|
|
6442
6470
|
height: BADGE_SIZE,
|
|
6443
6471
|
animation: anim ? "mha-counter-spin 20s linear infinite" : "none"
|
|
6444
6472
|
},
|
|
6445
|
-
children: /* @__PURE__ */ (0,
|
|
6473
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { style: {
|
|
6446
6474
|
width: "100%",
|
|
6447
6475
|
height: "100%",
|
|
6448
6476
|
borderRadius: "50%",
|
|
@@ -6453,7 +6481,7 @@ var MobileHeroAnimation = ({
|
|
|
6453
6481
|
display: "flex",
|
|
6454
6482
|
alignItems: "center",
|
|
6455
6483
|
justifyContent: "center"
|
|
6456
|
-
}, children: /* @__PURE__ */ (0,
|
|
6484
|
+
}, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
6457
6485
|
"img",
|
|
6458
6486
|
{
|
|
6459
6487
|
src: iconBasePath ? `${iconBasePath}/${protocol.iconSuffix}` : protocolIcons[protocol.network] ?? protocol.iconSuffix,
|
|
@@ -6473,7 +6501,7 @@ var MobileHeroAnimation = ({
|
|
|
6473
6501
|
|
|
6474
6502
|
// src/web/components/kaleidoscope-hero-animation.tsx
|
|
6475
6503
|
var import_react14 = require("react");
|
|
6476
|
-
var
|
|
6504
|
+
var import_jsx_runtime73 = require("react/jsx-runtime");
|
|
6477
6505
|
var PROTOCOLS2 = [
|
|
6478
6506
|
{ name: "Bitcoin L1", network: "L1", color: "#F7931A", glowColor: "rgba(247,147,26,0.5)" },
|
|
6479
6507
|
{ name: "Lightning", network: "LN", color: "#fbbf24", glowColor: "rgba(251,191,36,0.5)" },
|
|
@@ -6578,13 +6606,13 @@ var KaleidoScopeHeroAnimation = ({
|
|
|
6578
6606
|
const angle = Math.PI * 2 * i / 7 - Math.PI / 2;
|
|
6579
6607
|
return { x: c + orbitR * Math.cos(angle), y: c + orbitR * Math.sin(angle) };
|
|
6580
6608
|
});
|
|
6581
|
-
return /* @__PURE__ */ (0,
|
|
6609
|
+
return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
6582
6610
|
"div",
|
|
6583
6611
|
{
|
|
6584
6612
|
ref: containerRef,
|
|
6585
6613
|
className: `relative ${className}`,
|
|
6586
6614
|
style: size ? { width: size, height: size } : void 0,
|
|
6587
|
-
children: /* @__PURE__ */ (0,
|
|
6615
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
|
|
6588
6616
|
"svg",
|
|
6589
6617
|
{
|
|
6590
6618
|
viewBox: "0 0 500 500",
|
|
@@ -6593,60 +6621,60 @@ var KaleidoScopeHeroAnimation = ({
|
|
|
6593
6621
|
xmlns: "http://www.w3.org/2000/svg",
|
|
6594
6622
|
className: "overflow-visible",
|
|
6595
6623
|
children: [
|
|
6596
|
-
/* @__PURE__ */ (0,
|
|
6597
|
-
/* @__PURE__ */ (0,
|
|
6598
|
-
/* @__PURE__ */ (0,
|
|
6599
|
-
/* @__PURE__ */ (0,
|
|
6624
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("defs", { children: [
|
|
6625
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("linearGradient", { id: "kh-grad-a", x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
|
|
6626
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("stop", { offset: "0%", children: anim && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("animate", { attributeName: "stop-color", values: "#22c55e;#8a5cf6;#06b6d4;#F7931A;#22c55e", dur: "10s", repeatCount: "indefinite" }) }),
|
|
6627
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("stop", { offset: "100%", children: anim && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("animate", { attributeName: "stop-color", values: "#8a5cf6;#F7931A;#22c55e;#06b6d4;#8a5cf6", dur: "10s", repeatCount: "indefinite" }) })
|
|
6600
6628
|
] }),
|
|
6601
|
-
/* @__PURE__ */ (0,
|
|
6602
|
-
/* @__PURE__ */ (0,
|
|
6603
|
-
/* @__PURE__ */ (0,
|
|
6629
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("linearGradient", { id: "kh-grad-b", x1: "100%", y1: "0%", x2: "0%", y2: "100%", children: [
|
|
6630
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("stop", { offset: "0%", children: anim && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("animate", { attributeName: "stop-color", values: "#06b6d4;#22c55e;#F7931A;#8a5cf6;#06b6d4", dur: "8s", repeatCount: "indefinite" }) }),
|
|
6631
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("stop", { offset: "100%", children: anim && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("animate", { attributeName: "stop-color", values: "#F7931A;#06b6d4;#8a5cf6;#22c55e;#F7931A", dur: "8s", repeatCount: "indefinite" }) })
|
|
6604
6632
|
] }),
|
|
6605
|
-
/* @__PURE__ */ (0,
|
|
6606
|
-
/* @__PURE__ */ (0,
|
|
6607
|
-
/* @__PURE__ */ (0,
|
|
6633
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("linearGradient", { id: "kh-grad-c", x1: "50%", y1: "0%", x2: "50%", y2: "100%", children: [
|
|
6634
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("stop", { offset: "0%", children: anim && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("animate", { attributeName: "stop-color", values: "#0e9dff;#8a5cf6;#15E99A;#0e9dff", dur: "6s", repeatCount: "indefinite" }) }),
|
|
6635
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("stop", { offset: "100%", children: anim && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("animate", { attributeName: "stop-color", values: "#8a5cf6;#15E99A;#0e9dff;#8a5cf6", dur: "6s", repeatCount: "indefinite" }) })
|
|
6608
6636
|
] }),
|
|
6609
|
-
/* @__PURE__ */ (0,
|
|
6610
|
-
/* @__PURE__ */ (0,
|
|
6611
|
-
/* @__PURE__ */ (0,
|
|
6637
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("linearGradient", { id: "kh-gp", x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
|
|
6638
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("stop", { offset: "0%", stopColor: "#22c55e" }),
|
|
6639
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("stop", { offset: "100%", stopColor: "#8a5cf6" })
|
|
6612
6640
|
] }),
|
|
6613
|
-
/* @__PURE__ */ (0,
|
|
6614
|
-
/* @__PURE__ */ (0,
|
|
6615
|
-
/* @__PURE__ */ (0,
|
|
6641
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("linearGradient", { id: "kh-oc", x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
|
|
6642
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("stop", { offset: "0%", stopColor: "#F7931A" }),
|
|
6643
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("stop", { offset: "100%", stopColor: "#06b6d4" })
|
|
6616
6644
|
] }),
|
|
6617
|
-
/* @__PURE__ */ (0,
|
|
6618
|
-
/* @__PURE__ */ (0,
|
|
6619
|
-
/* @__PURE__ */ (0,
|
|
6645
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("linearGradient", { id: "kh-bp", x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
|
|
6646
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("stop", { offset: "0%", stopColor: "#0e9dff" }),
|
|
6647
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("stop", { offset: "100%", stopColor: "#8a5cf6" })
|
|
6620
6648
|
] }),
|
|
6621
|
-
/* @__PURE__ */ (0,
|
|
6622
|
-
/* @__PURE__ */ (0,
|
|
6623
|
-
/* @__PURE__ */ (0,
|
|
6624
|
-
/* @__PURE__ */ (0,
|
|
6649
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("radialGradient", { id: "kh-center-glow", cx: "50%", cy: "50%", r: "50%", children: [
|
|
6650
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("stop", { offset: "0%", stopColor: "#0e9dff", stopOpacity: "0.3" }),
|
|
6651
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("stop", { offset: "40%", stopColor: "#8a5cf6", stopOpacity: "0.15" }),
|
|
6652
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("stop", { offset: "100%", stopColor: "transparent", stopOpacity: "0" })
|
|
6625
6653
|
] }),
|
|
6626
|
-
/* @__PURE__ */ (0,
|
|
6627
|
-
/* @__PURE__ */ (0,
|
|
6628
|
-
/* @__PURE__ */ (0,
|
|
6629
|
-
/* @__PURE__ */ (0,
|
|
6654
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("radialGradient", { id: "kh-haze", cx: "50%", cy: "50%", r: "50%", children: [
|
|
6655
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("stop", { offset: "0%", stopColor: "transparent", stopOpacity: "0" }),
|
|
6656
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("stop", { offset: "60%", stopColor: "#0e9dff", stopOpacity: "0.03" }),
|
|
6657
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("stop", { offset: "100%", stopColor: "#8a5cf6", stopOpacity: "0.06" })
|
|
6630
6658
|
] }),
|
|
6631
|
-
/* @__PURE__ */ (0,
|
|
6632
|
-
/* @__PURE__ */ (0,
|
|
6633
|
-
/* @__PURE__ */ (0,
|
|
6634
|
-
/* @__PURE__ */ (0,
|
|
6635
|
-
/* @__PURE__ */ (0,
|
|
6659
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("filter", { id: "kh-glow", x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
|
|
6660
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("feGaussianBlur", { stdDeviation: "3", result: "blur" }),
|
|
6661
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("feMerge", { children: [
|
|
6662
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("feMergeNode", { in: "blur" }),
|
|
6663
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("feMergeNode", { in: "SourceGraphic" })
|
|
6636
6664
|
] })
|
|
6637
6665
|
] }),
|
|
6638
|
-
/* @__PURE__ */ (0,
|
|
6639
|
-
/* @__PURE__ */ (0,
|
|
6640
|
-
/* @__PURE__ */ (0,
|
|
6641
|
-
/* @__PURE__ */ (0,
|
|
6642
|
-
/* @__PURE__ */ (0,
|
|
6666
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("filter", { id: "kh-glow-lg", x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
|
|
6667
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("feGaussianBlur", { stdDeviation: "8", result: "blur" }),
|
|
6668
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("feMerge", { children: [
|
|
6669
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("feMergeNode", { in: "blur" }),
|
|
6670
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("feMergeNode", { in: "SourceGraphic" })
|
|
6643
6671
|
] })
|
|
6644
6672
|
] })
|
|
6645
6673
|
] }),
|
|
6646
|
-
/* @__PURE__ */ (0,
|
|
6647
|
-
/* @__PURE__ */ (0,
|
|
6648
|
-
/* @__PURE__ */ (0,
|
|
6649
|
-
anim && /* @__PURE__ */ (0,
|
|
6674
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("circle", { cx: c, cy: c, r: "248", fill: "url(#kh-haze)" }),
|
|
6675
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("g", { transform: px(20), children: [
|
|
6676
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("g", { children: [
|
|
6677
|
+
anim && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
6650
6678
|
"animateTransform",
|
|
6651
6679
|
{
|
|
6652
6680
|
attributeName: "transform",
|
|
@@ -6659,14 +6687,14 @@ var KaleidoScopeHeroAnimation = ({
|
|
|
6659
6687
|
),
|
|
6660
6688
|
Array.from({ length: 6 }, (_, i) => {
|
|
6661
6689
|
const a = Math.PI / 3 * i;
|
|
6662
|
-
return /* @__PURE__ */ (0,
|
|
6663
|
-
/* @__PURE__ */ (0,
|
|
6664
|
-
/* @__PURE__ */ (0,
|
|
6690
|
+
return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("g", { transform: `translate(${c + outerR1 * Math.cos(a)},${c + outerR1 * Math.sin(a)})`, children: [
|
|
6691
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("path", { d: hexPath2(40), fill: "url(#kh-grad-a)", opacity: 0.08 + i % 3 * 0.04 }),
|
|
6692
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("path", { d: hexPath2(40), fill: "none", stroke: "url(#kh-grad-a)", strokeWidth: "0.5", opacity: 0.15, children: anim && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("animate", { attributeName: "opacity", values: "0.1;0.25;0.1", dur: `${4 + i * 0.3}s`, repeatCount: "indefinite" }) })
|
|
6665
6693
|
] }, `ha-${i}`);
|
|
6666
6694
|
}),
|
|
6667
6695
|
Array.from({ length: 6 }, (_, i) => {
|
|
6668
6696
|
const a = Math.PI / 3 * i + Math.PI / 6;
|
|
6669
|
-
return /* @__PURE__ */ (0,
|
|
6697
|
+
return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
6670
6698
|
"path",
|
|
6671
6699
|
{
|
|
6672
6700
|
d: triPath(14),
|
|
@@ -6679,7 +6707,7 @@ var KaleidoScopeHeroAnimation = ({
|
|
|
6679
6707
|
}),
|
|
6680
6708
|
Array.from({ length: 12 }, (_, i) => {
|
|
6681
6709
|
const a = Math.PI / 6 * i;
|
|
6682
|
-
return /* @__PURE__ */ (0,
|
|
6710
|
+
return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
6683
6711
|
"circle",
|
|
6684
6712
|
{
|
|
6685
6713
|
cx: c + outerR1 * 0.92 * Math.cos(a),
|
|
@@ -6687,14 +6715,14 @@ var KaleidoScopeHeroAnimation = ({
|
|
|
6687
6715
|
r: "1.5",
|
|
6688
6716
|
fill: "url(#kh-grad-a)",
|
|
6689
6717
|
opacity: "0.15",
|
|
6690
|
-
children: anim && /* @__PURE__ */ (0,
|
|
6718
|
+
children: anim && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("animate", { attributeName: "opacity", values: "0.08;0.25;0.08", dur: `${2 + i % 3 * 0.7}s`, repeatCount: "indefinite" })
|
|
6691
6719
|
},
|
|
6692
6720
|
`od-${i}`
|
|
6693
6721
|
);
|
|
6694
6722
|
})
|
|
6695
6723
|
] }),
|
|
6696
|
-
/* @__PURE__ */ (0,
|
|
6697
|
-
anim && /* @__PURE__ */ (0,
|
|
6724
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("g", { children: [
|
|
6725
|
+
anim && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
6698
6726
|
"animateTransform",
|
|
6699
6727
|
{
|
|
6700
6728
|
attributeName: "transform",
|
|
@@ -6707,28 +6735,28 @@ var KaleidoScopeHeroAnimation = ({
|
|
|
6707
6735
|
),
|
|
6708
6736
|
Array.from({ length: 6 }, (_, i) => {
|
|
6709
6737
|
const a = Math.PI / 3 * i + Math.PI / 6;
|
|
6710
|
-
return /* @__PURE__ */ (0,
|
|
6711
|
-
/* @__PURE__ */ (0,
|
|
6712
|
-
/* @__PURE__ */ (0,
|
|
6738
|
+
return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("g", { transform: `translate(${c + outerR2 * Math.cos(a)},${c + outerR2 * Math.sin(a)})`, children: [
|
|
6739
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("path", { d: hexPath2(30), fill: "url(#kh-grad-b)", opacity: 0.06 + i % 2 * 0.04 }),
|
|
6740
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("path", { d: hexPath2(30), fill: "none", stroke: "url(#kh-grad-b)", strokeWidth: "0.5", opacity: 0.12 })
|
|
6713
6741
|
] }, `hb-${i}`);
|
|
6714
6742
|
}),
|
|
6715
6743
|
Array.from({ length: 6 }, (_, i) => {
|
|
6716
6744
|
const a = Math.PI / 3 * i;
|
|
6717
|
-
return /* @__PURE__ */ (0,
|
|
6745
|
+
return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
6718
6746
|
"path",
|
|
6719
6747
|
{
|
|
6720
6748
|
d: diamondPath(8, 16),
|
|
6721
6749
|
transform: `translate(${c + outerR2 * 0.85 * Math.cos(a)},${c + outerR2 * 0.85 * Math.sin(a)}) rotate(${i * 60})`,
|
|
6722
6750
|
fill: "url(#kh-grad-b)",
|
|
6723
6751
|
opacity: "0.08",
|
|
6724
|
-
children: anim && /* @__PURE__ */ (0,
|
|
6752
|
+
children: anim && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("animate", { attributeName: "opacity", values: "0.05;0.15;0.05", dur: `${3.5 + i * 0.4}s`, repeatCount: "indefinite" })
|
|
6725
6753
|
},
|
|
6726
6754
|
`db-${i}`
|
|
6727
6755
|
);
|
|
6728
6756
|
})
|
|
6729
6757
|
] }),
|
|
6730
|
-
/* @__PURE__ */ (0,
|
|
6731
|
-
anim && /* @__PURE__ */ (0,
|
|
6758
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("g", { children: [
|
|
6759
|
+
anim && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
6732
6760
|
"animateTransform",
|
|
6733
6761
|
{
|
|
6734
6762
|
attributeName: "transform",
|
|
@@ -6742,23 +6770,23 @@ var KaleidoScopeHeroAnimation = ({
|
|
|
6742
6770
|
Array.from({ length: 12 }, (_, i) => {
|
|
6743
6771
|
const a = Math.PI / 6 * i;
|
|
6744
6772
|
const r = outerR1 * (0.6 + i % 2 * 0.15);
|
|
6745
|
-
return /* @__PURE__ */ (0,
|
|
6773
|
+
return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
6746
6774
|
"path",
|
|
6747
6775
|
{
|
|
6748
6776
|
d: triPath(10),
|
|
6749
6777
|
transform: `translate(${c + r * Math.cos(a)},${c + r * Math.sin(a)}) rotate(${i * 30 + 15})`,
|
|
6750
6778
|
fill: "url(#kh-grad-c)",
|
|
6751
6779
|
opacity: "0.05",
|
|
6752
|
-
children: anim && /* @__PURE__ */ (0,
|
|
6780
|
+
children: anim && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("animate", { attributeName: "opacity", values: "0.03;0.1;0.03", dur: `${5 + i % 4 * 0.8}s`, repeatCount: "indefinite" })
|
|
6753
6781
|
},
|
|
6754
6782
|
`tc-${i}`
|
|
6755
6783
|
);
|
|
6756
6784
|
})
|
|
6757
6785
|
] })
|
|
6758
6786
|
] }),
|
|
6759
|
-
/* @__PURE__ */ (0,
|
|
6760
|
-
/* @__PURE__ */ (0,
|
|
6761
|
-
anim && /* @__PURE__ */ (0,
|
|
6787
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("g", { transform: px(14), children: [
|
|
6788
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("g", { children: [
|
|
6789
|
+
anim && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
6762
6790
|
"animateTransform",
|
|
6763
6791
|
{
|
|
6764
6792
|
attributeName: "transform",
|
|
@@ -6771,9 +6799,9 @@ var KaleidoScopeHeroAnimation = ({
|
|
|
6771
6799
|
),
|
|
6772
6800
|
Array.from({ length: 12 }, (_, i) => {
|
|
6773
6801
|
const a = Math.PI / 6 * i;
|
|
6774
|
-
return /* @__PURE__ */ (0,
|
|
6775
|
-
/* @__PURE__ */ (0,
|
|
6776
|
-
/* @__PURE__ */ (0,
|
|
6802
|
+
return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("g", { transform: `translate(${c + midR * Math.cos(a)},${c + midR * Math.sin(a)})`, children: [
|
|
6803
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("path", { d: hexPath2(12), fill: "url(#kh-grad-c)", opacity: 0.08 + i % 3 * 0.03 }),
|
|
6804
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("path", { d: hexPath2(12), fill: "none", stroke: "url(#kh-grad-c)", strokeWidth: "0.4", opacity: "0.12", children: anim && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("animate", { attributeName: "opacity", values: "0.08;0.2;0.08", dur: `${3 + i % 4 * 0.5}s`, repeatCount: "indefinite" }) })
|
|
6777
6805
|
] }, `mh-${i}`);
|
|
6778
6806
|
})
|
|
6779
6807
|
] }),
|
|
@@ -6784,7 +6812,7 @@ var KaleidoScopeHeroAnimation = ({
|
|
|
6784
6812
|
const y1 = c + midR * Math.sin(a1);
|
|
6785
6813
|
const x2 = c + midR * Math.cos(a2);
|
|
6786
6814
|
const y2 = c + midR * Math.sin(a2);
|
|
6787
|
-
return /* @__PURE__ */ (0,
|
|
6815
|
+
return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
6788
6816
|
"path",
|
|
6789
6817
|
{
|
|
6790
6818
|
d: `M${x1},${y1} Q${c},${c} ${x2},${y2}`,
|
|
@@ -6793,17 +6821,17 @@ var KaleidoScopeHeroAnimation = ({
|
|
|
6793
6821
|
strokeWidth: "0.5",
|
|
6794
6822
|
strokeDasharray: "3 5",
|
|
6795
6823
|
opacity: "0.1",
|
|
6796
|
-
children: anim && /* @__PURE__ */ (0,
|
|
6824
|
+
children: anim && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("animate", { attributeName: "stroke-dashoffset", from: "0", to: "-16", dur: `${3 + i * 0.2}s`, repeatCount: "indefinite" })
|
|
6797
6825
|
},
|
|
6798
6826
|
`arc-${i}`
|
|
6799
6827
|
);
|
|
6800
6828
|
})
|
|
6801
6829
|
] }),
|
|
6802
|
-
/* @__PURE__ */ (0,
|
|
6803
|
-
/* @__PURE__ */ (0,
|
|
6804
|
-
/* @__PURE__ */ (0,
|
|
6805
|
-
/* @__PURE__ */ (0,
|
|
6806
|
-
anim && /* @__PURE__ */ (0,
|
|
6830
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("g", { transform: px(10), children: [
|
|
6831
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("circle", { cx: c, cy: c, r: orbitR, fill: "none", stroke: "rgba(255,255,255,0.05)", strokeWidth: "1", strokeDasharray: "3 5", children: anim && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("animateTransform", { attributeName: "transform", type: "rotate", from: `0 ${c} ${c}`, to: `360 ${c} ${c}`, dur: "90s", repeatCount: "indefinite" }) }),
|
|
6832
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("circle", { cx: c, cy: c, r: orbitR + 4, fill: "none", stroke: "rgba(255,255,255,0.03)", strokeWidth: "0.5" }),
|
|
6833
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("g", { children: [
|
|
6834
|
+
anim && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
6807
6835
|
"animateTransform",
|
|
6808
6836
|
{
|
|
6809
6837
|
attributeName: "transform",
|
|
@@ -6818,8 +6846,8 @@ var KaleidoScopeHeroAnimation = ({
|
|
|
6818
6846
|
const angle = Math.atan2(pos.y - c, pos.x - c);
|
|
6819
6847
|
const dx = Math.cos(angle);
|
|
6820
6848
|
const dy = Math.sin(angle);
|
|
6821
|
-
return /* @__PURE__ */ (0,
|
|
6822
|
-
/* @__PURE__ */ (0,
|
|
6849
|
+
return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("g", { children: [
|
|
6850
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
6823
6851
|
"line",
|
|
6824
6852
|
{
|
|
6825
6853
|
x1: c + dx * 52,
|
|
@@ -6830,14 +6858,14 @@ var KaleidoScopeHeroAnimation = ({
|
|
|
6830
6858
|
strokeWidth: "0.8",
|
|
6831
6859
|
strokeDasharray: "2 4",
|
|
6832
6860
|
opacity: "0.2",
|
|
6833
|
-
children: anim && /* @__PURE__ */ (0,
|
|
6861
|
+
children: anim && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("animate", { attributeName: "stroke-dashoffset", from: "0", to: "-12", dur: `${1.5 + i * 0.2}s`, repeatCount: "indefinite" })
|
|
6834
6862
|
}
|
|
6835
6863
|
),
|
|
6836
|
-
/* @__PURE__ */ (0,
|
|
6837
|
-
/* @__PURE__ */ (0,
|
|
6838
|
-
/* @__PURE__ */ (0,
|
|
6839
|
-
/* @__PURE__ */ (0,
|
|
6840
|
-
/* @__PURE__ */ (0,
|
|
6864
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("circle", { r: "2.5", fill: PROTOCOLS2[i].color, opacity: "0", children: anim && /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_jsx_runtime73.Fragment, { children: [
|
|
6865
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("animate", { attributeName: "cx", values: `${c + dx * 52};${pos.x}`, dur: `${2 + i * 0.3}s`, repeatCount: "indefinite" }),
|
|
6866
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("animate", { attributeName: "cy", values: `${c + dy * 52};${pos.y}`, dur: `${2 + i * 0.3}s`, repeatCount: "indefinite" }),
|
|
6867
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("animate", { attributeName: "opacity", values: "0;0.8;0", dur: `${2 + i * 0.3}s`, repeatCount: "indefinite" }),
|
|
6868
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("animate", { attributeName: "r", values: "1.5;3;1.5", dur: `${2 + i * 0.3}s`, repeatCount: "indefinite" })
|
|
6841
6869
|
] }) })
|
|
6842
6870
|
] }, `conn-${i}`);
|
|
6843
6871
|
}),
|
|
@@ -6845,14 +6873,14 @@ var KaleidoScopeHeroAnimation = ({
|
|
|
6845
6873
|
const pos = iconPositions[i];
|
|
6846
6874
|
const labelWidth = Math.max(proto.name.length * 5.5 + 10, 32);
|
|
6847
6875
|
const isHovered = hoveredProtocol === proto.name;
|
|
6848
|
-
return /* @__PURE__ */ (0,
|
|
6876
|
+
return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("g", { transform: `translate(${pos.x},${pos.y})`, children: /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
|
|
6849
6877
|
"g",
|
|
6850
6878
|
{
|
|
6851
6879
|
onMouseEnter: () => setHoveredProtocol(proto.name),
|
|
6852
6880
|
onMouseLeave: () => setHoveredProtocol(null),
|
|
6853
6881
|
style: { cursor: "pointer" },
|
|
6854
6882
|
children: [
|
|
6855
|
-
anim && /* @__PURE__ */ (0,
|
|
6883
|
+
anim && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
6856
6884
|
"animateTransform",
|
|
6857
6885
|
{
|
|
6858
6886
|
attributeName: "transform",
|
|
@@ -6863,7 +6891,7 @@ var KaleidoScopeHeroAnimation = ({
|
|
|
6863
6891
|
repeatCount: "indefinite"
|
|
6864
6892
|
}
|
|
6865
6893
|
),
|
|
6866
|
-
/* @__PURE__ */ (0,
|
|
6894
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
6867
6895
|
"circle",
|
|
6868
6896
|
{
|
|
6869
6897
|
cx: "0",
|
|
@@ -6873,13 +6901,13 @@ var KaleidoScopeHeroAnimation = ({
|
|
|
6873
6901
|
stroke: proto.color,
|
|
6874
6902
|
strokeWidth: "1",
|
|
6875
6903
|
opacity: "0",
|
|
6876
|
-
children: anim && /* @__PURE__ */ (0,
|
|
6877
|
-
/* @__PURE__ */ (0,
|
|
6878
|
-
/* @__PURE__ */ (0,
|
|
6904
|
+
children: anim && /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_jsx_runtime73.Fragment, { children: [
|
|
6905
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("animate", { attributeName: "r", values: `${iconR};${iconR + 12}`, dur: `${3 + i * 0.5}s`, repeatCount: "indefinite", begin: `${i * 0.4}s` }),
|
|
6906
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("animate", { attributeName: "opacity", values: "0.5;0", dur: `${3 + i * 0.5}s`, repeatCount: "indefinite", begin: `${i * 0.4}s` })
|
|
6879
6907
|
] })
|
|
6880
6908
|
}
|
|
6881
6909
|
),
|
|
6882
|
-
/* @__PURE__ */ (0,
|
|
6910
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
6883
6911
|
"circle",
|
|
6884
6912
|
{
|
|
6885
6913
|
cx: "0",
|
|
@@ -6889,10 +6917,10 @@ var KaleidoScopeHeroAnimation = ({
|
|
|
6889
6917
|
stroke: proto.color,
|
|
6890
6918
|
strokeWidth: "1",
|
|
6891
6919
|
opacity: "0.15",
|
|
6892
|
-
children: anim && /* @__PURE__ */ (0,
|
|
6920
|
+
children: anim && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("animate", { attributeName: "opacity", values: "0.15;0.4;0.15", dur: `${3 + i * 0.4}s`, repeatCount: "indefinite" })
|
|
6893
6921
|
}
|
|
6894
6922
|
),
|
|
6895
|
-
/* @__PURE__ */ (0,
|
|
6923
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
6896
6924
|
"circle",
|
|
6897
6925
|
{
|
|
6898
6926
|
cx: "0",
|
|
@@ -6902,10 +6930,10 @@ var KaleidoScopeHeroAnimation = ({
|
|
|
6902
6930
|
stroke: proto.color,
|
|
6903
6931
|
strokeWidth: "1.5",
|
|
6904
6932
|
opacity: "0.25",
|
|
6905
|
-
children: anim && /* @__PURE__ */ (0,
|
|
6933
|
+
children: anim && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("animate", { attributeName: "opacity", values: "0.2;0.5;0.2", dur: `${2.5 + i * 0.3}s`, repeatCount: "indefinite" })
|
|
6906
6934
|
}
|
|
6907
6935
|
),
|
|
6908
|
-
/* @__PURE__ */ (0,
|
|
6936
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
6909
6937
|
"circle",
|
|
6910
6938
|
{
|
|
6911
6939
|
cx: "0",
|
|
@@ -6916,8 +6944,8 @@ var KaleidoScopeHeroAnimation = ({
|
|
|
6916
6944
|
strokeWidth: "1"
|
|
6917
6945
|
}
|
|
6918
6946
|
),
|
|
6919
|
-
/* @__PURE__ */ (0,
|
|
6920
|
-
/* @__PURE__ */ (0,
|
|
6947
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("circle", { cx: "0", cy: "0", r: iconR - 2, fill: proto.color, opacity: "0.06" }),
|
|
6948
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("foreignObject", { x: -iconR, y: -iconR, width: iconR * 2, height: iconR * 2, children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
6921
6949
|
NetworkBadge,
|
|
6922
6950
|
{
|
|
6923
6951
|
network: proto.network,
|
|
@@ -6925,8 +6953,8 @@ var KaleidoScopeHeroAnimation = ({
|
|
|
6925
6953
|
className: "w-full h-full"
|
|
6926
6954
|
}
|
|
6927
6955
|
) }),
|
|
6928
|
-
/* @__PURE__ */ (0,
|
|
6929
|
-
/* @__PURE__ */ (0,
|
|
6956
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("g", { opacity: isHovered ? 1 : 0, style: { transition: "opacity 0.2s ease" }, children: [
|
|
6957
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
6930
6958
|
"rect",
|
|
6931
6959
|
{
|
|
6932
6960
|
x: -labelWidth / 2,
|
|
@@ -6940,7 +6968,7 @@ var KaleidoScopeHeroAnimation = ({
|
|
|
6940
6968
|
strokeOpacity: 0.4
|
|
6941
6969
|
}
|
|
6942
6970
|
),
|
|
6943
|
-
/* @__PURE__ */ (0,
|
|
6971
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
6944
6972
|
"text",
|
|
6945
6973
|
{
|
|
6946
6974
|
x: "0",
|
|
@@ -6960,9 +6988,9 @@ var KaleidoScopeHeroAnimation = ({
|
|
|
6960
6988
|
})
|
|
6961
6989
|
] })
|
|
6962
6990
|
] }),
|
|
6963
|
-
/* @__PURE__ */ (0,
|
|
6964
|
-
/* @__PURE__ */ (0,
|
|
6965
|
-
anim && /* @__PURE__ */ (0,
|
|
6991
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("g", { transform: px(5), children: [
|
|
6992
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("g", { children: [
|
|
6993
|
+
anim && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
6966
6994
|
"animateTransform",
|
|
6967
6995
|
{
|
|
6968
6996
|
attributeName: "transform",
|
|
@@ -6975,28 +7003,28 @@ var KaleidoScopeHeroAnimation = ({
|
|
|
6975
7003
|
),
|
|
6976
7004
|
Array.from({ length: 6 }, (_, i) => {
|
|
6977
7005
|
const a = Math.PI / 3 * i;
|
|
6978
|
-
return /* @__PURE__ */ (0,
|
|
7006
|
+
return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
6979
7007
|
"path",
|
|
6980
7008
|
{
|
|
6981
7009
|
d: diamondPath(10, 22),
|
|
6982
7010
|
transform: `translate(${c + innerR * Math.cos(a)},${c + innerR * Math.sin(a)}) rotate(${i * 60})`,
|
|
6983
7011
|
fill: "url(#kh-gp)",
|
|
6984
7012
|
opacity: "0.15",
|
|
6985
|
-
children: anim && /* @__PURE__ */ (0,
|
|
7013
|
+
children: anim && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("animate", { attributeName: "opacity", values: "0.1;0.28;0.1", dur: `${2.8 + i * 0.35}s`, repeatCount: "indefinite" })
|
|
6986
7014
|
},
|
|
6987
7015
|
`d-${i}`
|
|
6988
7016
|
);
|
|
6989
7017
|
}),
|
|
6990
7018
|
Array.from({ length: 6 }, (_, i) => {
|
|
6991
7019
|
const a = Math.PI / 3 * i + Math.PI / 6;
|
|
6992
|
-
return /* @__PURE__ */ (0,
|
|
7020
|
+
return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
6993
7021
|
"path",
|
|
6994
7022
|
{
|
|
6995
7023
|
d: triPath(8),
|
|
6996
7024
|
transform: `translate(${c + innerR * 0.75 * Math.cos(a)},${c + innerR * 0.75 * Math.sin(a)}) rotate(${i * 60 + 30})`,
|
|
6997
7025
|
fill: "url(#kh-oc)",
|
|
6998
7026
|
opacity: "0.1",
|
|
6999
|
-
children: anim && /* @__PURE__ */ (0,
|
|
7027
|
+
children: anim && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("animate", { attributeName: "opacity", values: "0.06;0.18;0.06", dur: `${3.2 + i * 0.3}s`, repeatCount: "indefinite" })
|
|
7000
7028
|
},
|
|
7001
7029
|
`it-${i}`
|
|
7002
7030
|
);
|
|
@@ -7004,7 +7032,7 @@ var KaleidoScopeHeroAnimation = ({
|
|
|
7004
7032
|
Array.from({ length: 12 }, (_, i) => {
|
|
7005
7033
|
const a = Math.PI / 6 * i;
|
|
7006
7034
|
const r = innerR * (i % 2 === 0 ? 0.55 : 0.65);
|
|
7007
|
-
return /* @__PURE__ */ (0,
|
|
7035
|
+
return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
7008
7036
|
"circle",
|
|
7009
7037
|
{
|
|
7010
7038
|
cx: c + r * Math.cos(a),
|
|
@@ -7012,14 +7040,14 @@ var KaleidoScopeHeroAnimation = ({
|
|
|
7012
7040
|
r: i % 2 === 0 ? 2 : 1.5,
|
|
7013
7041
|
fill: "url(#kh-oc)",
|
|
7014
7042
|
opacity: "0.2",
|
|
7015
|
-
children: anim && /* @__PURE__ */ (0,
|
|
7043
|
+
children: anim && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("animate", { attributeName: "opacity", values: "0.1;0.35;0.1", dur: `${2 + i % 4 * 0.5}s`, repeatCount: "indefinite" })
|
|
7016
7044
|
},
|
|
7017
7045
|
`id-${i}`
|
|
7018
7046
|
);
|
|
7019
7047
|
})
|
|
7020
7048
|
] }),
|
|
7021
|
-
/* @__PURE__ */ (0,
|
|
7022
|
-
anim && /* @__PURE__ */ (0,
|
|
7049
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("g", { children: [
|
|
7050
|
+
anim && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
7023
7051
|
"animateTransform",
|
|
7024
7052
|
{
|
|
7025
7053
|
attributeName: "transform",
|
|
@@ -7032,27 +7060,27 @@ var KaleidoScopeHeroAnimation = ({
|
|
|
7032
7060
|
),
|
|
7033
7061
|
Array.from({ length: 6 }, (_, i) => {
|
|
7034
7062
|
const a = Math.PI / 3 * i + Math.PI / 6;
|
|
7035
|
-
return /* @__PURE__ */ (0,
|
|
7063
|
+
return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
7036
7064
|
"path",
|
|
7037
7065
|
{
|
|
7038
7066
|
d: hexPath2(6),
|
|
7039
7067
|
transform: `translate(${c + innerR * 0.42 * Math.cos(a)},${c + innerR * 0.42 * Math.sin(a)})`,
|
|
7040
7068
|
fill: "url(#kh-bp)",
|
|
7041
7069
|
opacity: "0.1",
|
|
7042
|
-
children: anim && /* @__PURE__ */ (0,
|
|
7070
|
+
children: anim && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("animate", { attributeName: "opacity", values: "0.06;0.18;0.06", dur: `${2.5 + i * 0.3}s`, repeatCount: "indefinite" })
|
|
7043
7071
|
},
|
|
7044
7072
|
`ih-${i}`
|
|
7045
7073
|
);
|
|
7046
7074
|
})
|
|
7047
7075
|
] })
|
|
7048
7076
|
] }),
|
|
7049
|
-
/* @__PURE__ */ (0,
|
|
7077
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("g", { transform: px(18), children: Array.from({ length: 16 }, (_, i) => {
|
|
7050
7078
|
const a = Math.PI * 2 * i / 16;
|
|
7051
7079
|
const baseR = 60 + i % 4 * 45;
|
|
7052
7080
|
const x = c + baseR * Math.cos(a);
|
|
7053
7081
|
const y = c + baseR * Math.sin(a);
|
|
7054
7082
|
const colors2 = ["#0e9dff", "#8a5cf6", "#22c55e", "#F7931A", "#06b6d4", "#15E99A"];
|
|
7055
|
-
return /* @__PURE__ */ (0,
|
|
7083
|
+
return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
7056
7084
|
"circle",
|
|
7057
7085
|
{
|
|
7058
7086
|
cx: x,
|
|
@@ -7060,26 +7088,26 @@ var KaleidoScopeHeroAnimation = ({
|
|
|
7060
7088
|
r: 1 + i % 3 * 0.5,
|
|
7061
7089
|
fill: colors2[i % colors2.length],
|
|
7062
7090
|
opacity: "0",
|
|
7063
|
-
children: anim && /* @__PURE__ */ (0,
|
|
7064
|
-
/* @__PURE__ */ (0,
|
|
7065
|
-
/* @__PURE__ */ (0,
|
|
7066
|
-
/* @__PURE__ */ (0,
|
|
7091
|
+
children: anim && /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_jsx_runtime73.Fragment, { children: [
|
|
7092
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("animate", { attributeName: "opacity", values: "0;0.6;0", dur: `${3 + i % 5 * 0.8}s`, repeatCount: "indefinite", begin: `${i % 7 * 0.5}s` }),
|
|
7093
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("animate", { attributeName: "cx", values: `${x};${x + Math.cos(a) * 15}`, dur: `${4 + i % 3 * 1.5}s`, repeatCount: "indefinite", begin: `${i % 7 * 0.5}s` }),
|
|
7094
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("animate", { attributeName: "cy", values: `${y};${y + Math.sin(a) * 15}`, dur: `${4 + i % 3 * 1.5}s`, repeatCount: "indefinite", begin: `${i % 7 * 0.5}s` })
|
|
7067
7095
|
] })
|
|
7068
7096
|
},
|
|
7069
7097
|
`p-${i}`
|
|
7070
7098
|
);
|
|
7071
7099
|
}) }),
|
|
7072
|
-
/* @__PURE__ */ (0,
|
|
7073
|
-
/* @__PURE__ */ (0,
|
|
7074
|
-
/* @__PURE__ */ (0,
|
|
7075
|
-
/* @__PURE__ */ (0,
|
|
7076
|
-
/* @__PURE__ */ (0,
|
|
7100
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("g", { children: [
|
|
7101
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("circle", { cx: c, cy: c, r: "75", fill: "url(#kh-center-glow)", children: anim && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("animate", { attributeName: "r", values: "70;80;70", dur: "4s", repeatCount: "indefinite" }) }),
|
|
7102
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("circle", { cx: c, cy: c, r: "52", fill: "none", stroke: "url(#kh-bp)", strokeWidth: "1", opacity: "0", children: anim && /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_jsx_runtime73.Fragment, { children: [
|
|
7103
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("animate", { attributeName: "r", values: "48;65", dur: "3s", repeatCount: "indefinite" }),
|
|
7104
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("animate", { attributeName: "opacity", values: "0.4;0", dur: "3s", repeatCount: "indefinite" })
|
|
7077
7105
|
] }) }),
|
|
7078
|
-
/* @__PURE__ */ (0,
|
|
7079
|
-
/* @__PURE__ */ (0,
|
|
7080
|
-
/* @__PURE__ */ (0,
|
|
7106
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("circle", { cx: c, cy: c, r: "48", fill: "none", stroke: "url(#kh-gp)", strokeWidth: "0.8", opacity: "0", children: anim && /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_jsx_runtime73.Fragment, { children: [
|
|
7107
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("animate", { attributeName: "r", values: "48;60", dur: "3s", repeatCount: "indefinite", begin: "1.5s" }),
|
|
7108
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("animate", { attributeName: "opacity", values: "0.3;0", dur: "3s", repeatCount: "indefinite", begin: "1.5s" })
|
|
7081
7109
|
] }) }),
|
|
7082
|
-
/* @__PURE__ */ (0,
|
|
7110
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
7083
7111
|
"path",
|
|
7084
7112
|
{
|
|
7085
7113
|
d: hexPath2(50),
|
|
@@ -7089,13 +7117,13 @@ var KaleidoScopeHeroAnimation = ({
|
|
|
7089
7117
|
strokeWidth: "1.5",
|
|
7090
7118
|
opacity: "0.4",
|
|
7091
7119
|
filter: "url(#kh-glow)",
|
|
7092
|
-
children: anim && /* @__PURE__ */ (0,
|
|
7093
|
-
/* @__PURE__ */ (0,
|
|
7094
|
-
/* @__PURE__ */ (0,
|
|
7120
|
+
children: anim && /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_jsx_runtime73.Fragment, { children: [
|
|
7121
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("animate", { attributeName: "opacity", values: "0.3;0.65;0.3", dur: "3s", repeatCount: "indefinite" }),
|
|
7122
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("animate", { attributeName: "stroke-width", values: "1.5;2.5;1.5", dur: "3s", repeatCount: "indefinite" })
|
|
7095
7123
|
] })
|
|
7096
7124
|
}
|
|
7097
7125
|
),
|
|
7098
|
-
/* @__PURE__ */ (0,
|
|
7126
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
7099
7127
|
"path",
|
|
7100
7128
|
{
|
|
7101
7129
|
d: hexPath2(46),
|
|
@@ -7105,21 +7133,21 @@ var KaleidoScopeHeroAnimation = ({
|
|
|
7105
7133
|
strokeWidth: "0.5"
|
|
7106
7134
|
}
|
|
7107
7135
|
),
|
|
7108
|
-
/* @__PURE__ */ (0,
|
|
7109
|
-
/* @__PURE__ */ (0,
|
|
7110
|
-
/* @__PURE__ */ (0,
|
|
7111
|
-
/* @__PURE__ */ (0,
|
|
7112
|
-
/* @__PURE__ */ (0,
|
|
7113
|
-
/* @__PURE__ */ (0,
|
|
7114
|
-
/* @__PURE__ */ (0,
|
|
7115
|
-
/* @__PURE__ */ (0,
|
|
7116
|
-
/* @__PURE__ */ (0,
|
|
7117
|
-
/* @__PURE__ */ (0,
|
|
7118
|
-
/* @__PURE__ */ (0,
|
|
7119
|
-
/* @__PURE__ */ (0,
|
|
7120
|
-
/* @__PURE__ */ (0,
|
|
7121
|
-
/* @__PURE__ */ (0,
|
|
7122
|
-
/* @__PURE__ */ (0,
|
|
7136
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("g", { transform: `translate(${c - 34},${c - 34}) scale(0.325)`, children: [
|
|
7137
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("path", { d: "M69.7141 207.3H0.908203L35.3243 172.936L69.7141 207.3Z", fill: "#6F32FF" }),
|
|
7138
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("path", { d: "M138.441 0.96106V69.767L104.078 35.3508L138.441 0.96106Z", fill: "#17B581" }),
|
|
7139
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("path", { d: "M138.415 138.547V207.352L104.051 172.936L138.415 138.547Z", fill: "#17B581" }),
|
|
7140
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("path", { d: "M138.441 69.7406V0.96106L172.804 35.3772L138.441 69.767V69.7406Z", fill: "#17B581" }),
|
|
7141
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("path", { d: "M69.6614 138.494V69.6879L104.025 104.104L69.6614 138.494Z", fill: "#15E99A" }),
|
|
7142
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("path", { d: "M69.6615 69.7142V138.52L35.2981 104.104L69.6615 69.7142Z", fill: "#15E99A" }),
|
|
7143
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("path", { d: "M138.467 207.379V138.573L172.831 172.989L138.467 207.379Z", fill: "#17B581" }),
|
|
7144
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("path", { d: "M0.908203 0.908325H69.7141L35.298 35.2718L0.908203 0.908325Z", fill: "#6F32FF" }),
|
|
7145
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("path", { d: "M207.22 207.3H138.415L172.831 172.936L207.22 207.3Z", fill: "#17B581" }),
|
|
7146
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("path", { d: "M138.415 0.987427H207.22L172.804 35.3509L138.415 0.987427Z", fill: "#17B581" }),
|
|
7147
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("path", { d: "M138.467 69.7143H69.6614L104.078 35.3508L138.467 69.7143Z", fill: "#17B581" }),
|
|
7148
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("path", { d: "M69.635 138.494H138.441L104.025 172.857L69.635 138.494Z", fill: "#17B581" }),
|
|
7149
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("path", { d: "M138.415 138.494H69.635L104.025 104.157L138.388 138.494H138.415Z", fill: "#15E99A" }),
|
|
7150
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("path", { d: "M138.415 69.7142L104.051 104.051L69.6614 69.7142H138.441H138.415Z", fill: "#15E99A" })
|
|
7123
7151
|
] })
|
|
7124
7152
|
] })
|
|
7125
7153
|
]
|
|
@@ -7253,7 +7281,7 @@ var colors = {
|
|
|
7253
7281
|
};
|
|
7254
7282
|
|
|
7255
7283
|
// src/web/components/deposit-ui-shared.tsx
|
|
7256
|
-
var
|
|
7284
|
+
var import_jsx_runtime74 = require("react/jsx-runtime");
|
|
7257
7285
|
var GLOW_ALPHA = "26";
|
|
7258
7286
|
function qrGlowStyle(hex) {
|
|
7259
7287
|
return { boxShadow: `0 0 30px ${hex}${GLOW_ALPHA}` };
|
|
@@ -7270,7 +7298,7 @@ var NETWORK_CONFIG = {
|
|
|
7270
7298
|
// On-chain uses a chain-link glyph rather than the ₿ coin — the coin reads
|
|
7271
7299
|
// as "the BTC asset", whereas this row is specifically the *on-chain* (L1)
|
|
7272
7300
|
// receive rail alongside Lightning/Spark/Arkade, so a chain mark disambiguates.
|
|
7273
|
-
icon: /* @__PURE__ */ (0,
|
|
7301
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "material-symbols-outlined text-icon-xs leading-none", children: "link" })
|
|
7274
7302
|
},
|
|
7275
7303
|
lightning: {
|
|
7276
7304
|
label: "Lightning",
|
|
@@ -7280,7 +7308,7 @@ var NETWORK_CONFIG = {
|
|
|
7280
7308
|
border: "border-network-lightning/40",
|
|
7281
7309
|
qrBorder: "border-network-lightning/30",
|
|
7282
7310
|
qrGlow: qrGlowStyle(colors.network.lightning),
|
|
7283
|
-
icon: /* @__PURE__ */ (0,
|
|
7311
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("img", { src: "/icons/lightning/lightning.svg", className: "size-3", alt: "" })
|
|
7284
7312
|
},
|
|
7285
7313
|
spark: {
|
|
7286
7314
|
label: "Spark",
|
|
@@ -7290,7 +7318,7 @@ var NETWORK_CONFIG = {
|
|
|
7290
7318
|
border: "border-info/40",
|
|
7291
7319
|
qrBorder: "border-info/30",
|
|
7292
7320
|
qrGlow: qrGlowStyle(colors.info),
|
|
7293
|
-
icon: /* @__PURE__ */ (0,
|
|
7321
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("img", { src: "/icons/spark/Asterisk/Spark Asterisk White.svg", className: "h-3 w-3", alt: "" })
|
|
7294
7322
|
},
|
|
7295
7323
|
arkade: {
|
|
7296
7324
|
label: "Arkade",
|
|
@@ -7300,7 +7328,7 @@ var NETWORK_CONFIG = {
|
|
|
7300
7328
|
border: "border-network-arkade/40",
|
|
7301
7329
|
qrBorder: "border-network-arkade/30",
|
|
7302
7330
|
qrGlow: qrGlowStyle(colors.network.arkade),
|
|
7303
|
-
icon: /* @__PURE__ */ (0,
|
|
7331
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("img", { src: "/icons/arkade/arkade-icon.svg", className: "h-3 w-3 rounded-sm", alt: "" })
|
|
7304
7332
|
}
|
|
7305
7333
|
};
|
|
7306
7334
|
var ACCOUNT_META = {
|
|
@@ -7309,14 +7337,14 @@ var ACCOUNT_META = {
|
|
|
7309
7337
|
accentBg: "bg-primary/10",
|
|
7310
7338
|
accentText: "text-primary",
|
|
7311
7339
|
accentBorder: "border-primary/30",
|
|
7312
|
-
icon: /* @__PURE__ */ (0,
|
|
7340
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("img", { src: "/icons/rgb/rgb-logo.svg", alt: "", className: "h-2.5 w-2.5 object-contain" })
|
|
7313
7341
|
},
|
|
7314
7342
|
SPARK: {
|
|
7315
7343
|
shortLabel: "Spark",
|
|
7316
7344
|
accentBg: "bg-info/10",
|
|
7317
7345
|
accentText: "text-info",
|
|
7318
7346
|
accentBorder: "border-info/30",
|
|
7319
|
-
icon: /* @__PURE__ */ (0,
|
|
7347
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
7320
7348
|
"img",
|
|
7321
7349
|
{
|
|
7322
7350
|
src: "/icons/spark/Asterisk/Spark Asterisk White.svg",
|
|
@@ -7330,7 +7358,7 @@ var ACCOUNT_META = {
|
|
|
7330
7358
|
accentBg: "bg-network-arkade/10",
|
|
7331
7359
|
accentText: "text-network-arkade",
|
|
7332
7360
|
accentBorder: "border-network-arkade/30",
|
|
7333
|
-
icon: /* @__PURE__ */ (0,
|
|
7361
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("img", { src: "/icons/arkade/arkade-icon.svg", alt: "", className: "h-2.5 w-2.5 rounded-[1px] object-contain" })
|
|
7334
7362
|
}
|
|
7335
7363
|
};
|
|
7336
7364
|
var METHOD_META = {
|
|
@@ -7347,7 +7375,7 @@ function InvoiceStatusBanner({
|
|
|
7347
7375
|
isInvoiceFailedOrExpired,
|
|
7348
7376
|
invoiceStatus
|
|
7349
7377
|
}) {
|
|
7350
|
-
return /* @__PURE__ */ (0,
|
|
7378
|
+
return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
|
|
7351
7379
|
"div",
|
|
7352
7380
|
{
|
|
7353
7381
|
className: cn(
|
|
@@ -7355,17 +7383,17 @@ function InvoiceStatusBanner({
|
|
|
7355
7383
|
isInvoicePaid ? "border-primary/30 bg-primary/10 text-primary" : isInvoiceFailedOrExpired ? "border-danger/20 bg-danger/10 text-danger" : "border-warning/20 bg-warning/10 text-warning"
|
|
7356
7384
|
),
|
|
7357
7385
|
children: [
|
|
7358
|
-
isInvoicePending && /* @__PURE__ */ (0,
|
|
7359
|
-
/* @__PURE__ */ (0,
|
|
7360
|
-
/* @__PURE__ */ (0,
|
|
7386
|
+
isInvoicePending && /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(import_jsx_runtime74.Fragment, { children: [
|
|
7387
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "material-symbols-outlined animate-spin text-icon-sm", children: "progress_activity" }),
|
|
7388
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { children: "Waiting for payment..." })
|
|
7361
7389
|
] }),
|
|
7362
|
-
isInvoicePaid && /* @__PURE__ */ (0,
|
|
7363
|
-
/* @__PURE__ */ (0,
|
|
7364
|
-
/* @__PURE__ */ (0,
|
|
7390
|
+
isInvoicePaid && /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(import_jsx_runtime74.Fragment, { children: [
|
|
7391
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "material-symbols-outlined text-icon-sm", children: "check_circle" }),
|
|
7392
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { children: "Payment received!" })
|
|
7365
7393
|
] }),
|
|
7366
|
-
isInvoiceFailedOrExpired && /* @__PURE__ */ (0,
|
|
7367
|
-
/* @__PURE__ */ (0,
|
|
7368
|
-
/* @__PURE__ */ (0,
|
|
7394
|
+
isInvoiceFailedOrExpired && /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(import_jsx_runtime74.Fragment, { children: [
|
|
7395
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "material-symbols-outlined text-icon-sm", children: "cancel" }),
|
|
7396
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("span", { children: [
|
|
7369
7397
|
"Invoice ",
|
|
7370
7398
|
invoiceStatus?.toLowerCase() === "expired" ? "expired" : "failed"
|
|
7371
7399
|
] })
|
|
@@ -7375,20 +7403,20 @@ function InvoiceStatusBanner({
|
|
|
7375
7403
|
);
|
|
7376
7404
|
}
|
|
7377
7405
|
function PaidOverlay() {
|
|
7378
|
-
return /* @__PURE__ */ (0,
|
|
7379
|
-
/* @__PURE__ */ (0,
|
|
7380
|
-
/* @__PURE__ */ (0,
|
|
7406
|
+
return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "absolute inset-0 flex items-center justify-center rounded-2xl bg-background/80", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "flex flex-col items-center gap-2", children: [
|
|
7407
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "flex size-14 items-center justify-center rounded-full bg-primary", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "material-symbols-outlined text-icon-4xl text-background", children: "check" }) }),
|
|
7408
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "text-sm font-bold text-primary", children: "Received!" })
|
|
7381
7409
|
] }) });
|
|
7382
7410
|
}
|
|
7383
7411
|
function CopyIcon({ copied }) {
|
|
7384
|
-
return /* @__PURE__ */ (0,
|
|
7412
|
+
return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
7385
7413
|
"div",
|
|
7386
7414
|
{
|
|
7387
7415
|
className: cn(
|
|
7388
7416
|
"flex-shrink-0 rounded-lg p-2 transition-all",
|
|
7389
7417
|
copied ? "bg-primary/15 text-primary" : "bg-white/5 text-white/40 group-hover:bg-primary/10 group-hover:text-primary"
|
|
7390
7418
|
),
|
|
7391
|
-
children: copied ? /* @__PURE__ */ (0,
|
|
7419
|
+
children: copied ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Icon, { name: "check", size: "sm" }) : /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Icon, { name: "content_copy", size: "sm" })
|
|
7392
7420
|
}
|
|
7393
7421
|
);
|
|
7394
7422
|
}
|
|
@@ -7399,7 +7427,7 @@ function AccountChoiceChip({
|
|
|
7399
7427
|
label
|
|
7400
7428
|
}) {
|
|
7401
7429
|
const meta = ACCOUNT_META[account];
|
|
7402
|
-
return /* @__PURE__ */ (0,
|
|
7430
|
+
return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
|
|
7403
7431
|
"button",
|
|
7404
7432
|
{
|
|
7405
7433
|
type: "button",
|
|
@@ -7411,7 +7439,7 @@ function AccountChoiceChip({
|
|
|
7411
7439
|
),
|
|
7412
7440
|
children: [
|
|
7413
7441
|
meta.icon,
|
|
7414
|
-
/* @__PURE__ */ (0,
|
|
7442
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { children: label ?? meta.shortLabel })
|
|
7415
7443
|
]
|
|
7416
7444
|
}
|
|
7417
7445
|
);
|
|
@@ -7460,8 +7488,8 @@ function NetworkInfoDisclosure({
|
|
|
7460
7488
|
}) {
|
|
7461
7489
|
const [open, setOpen] = (0, import_react15.useState)(false);
|
|
7462
7490
|
if (networks.length === 0) return null;
|
|
7463
|
-
return /* @__PURE__ */ (0,
|
|
7464
|
-
/* @__PURE__ */ (0,
|
|
7491
|
+
return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: cn("overflow-hidden rounded-xl border border-white/8 bg-white/3 transition-all", className), children: [
|
|
7492
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
|
|
7465
7493
|
"button",
|
|
7466
7494
|
{
|
|
7467
7495
|
type: "button",
|
|
@@ -7469,24 +7497,24 @@ function NetworkInfoDisclosure({
|
|
|
7469
7497
|
"aria-expanded": open,
|
|
7470
7498
|
className: "flex w-full items-center gap-2 px-2.5 py-1.5 text-left transition-colors hover:bg-white/4",
|
|
7471
7499
|
children: [
|
|
7472
|
-
/* @__PURE__ */ (0,
|
|
7473
|
-
/* @__PURE__ */ (0,
|
|
7474
|
-
/* @__PURE__ */ (0,
|
|
7500
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Icon, { name: "info", size: "xs", className: "text-white/40" }),
|
|
7501
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "flex-1 text-xxs font-bold uppercase tracking-widest text-white/50", children: "What are these networks?" }),
|
|
7502
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Icon, { name: open ? "expand_less" : "expand_more", size: "xs", className: "text-white/40" })
|
|
7475
7503
|
]
|
|
7476
7504
|
}
|
|
7477
7505
|
),
|
|
7478
|
-
open && /* @__PURE__ */ (0,
|
|
7506
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "space-y-2 px-2.5 pb-2.5 pt-0.5 animate-in fade-in slide-in-from-top-1 duration-200", children: networks.map((network) => {
|
|
7479
7507
|
const info = NETWORK_INFO[network];
|
|
7480
7508
|
const cfg = NETWORK_CONFIG[network];
|
|
7481
|
-
return /* @__PURE__ */ (0,
|
|
7482
|
-
/* @__PURE__ */ (0,
|
|
7483
|
-
/* @__PURE__ */ (0,
|
|
7484
|
-
/* @__PURE__ */ (0,
|
|
7509
|
+
return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "space-y-1", children: [
|
|
7510
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "flex items-center gap-1.5", children: [
|
|
7511
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: cn("flex size-4 flex-shrink-0 items-center justify-center rounded-md", cfg.bg), children: cfg.icon }),
|
|
7512
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: cn("text-xxs font-bold uppercase tracking-widest", cfg.text), children: info.title })
|
|
7485
7513
|
] }),
|
|
7486
|
-
/* @__PURE__ */ (0,
|
|
7487
|
-
/* @__PURE__ */ (0,
|
|
7488
|
-
/* @__PURE__ */ (0,
|
|
7489
|
-
/* @__PURE__ */ (0,
|
|
7514
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)("p", { className: "pl-5 text-tiny leading-snug text-muted-foreground", children: info.detail }),
|
|
7515
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)("ul", { className: "space-y-0.5 pl-5", children: info.bullets.map((bullet) => /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("li", { className: "flex items-start gap-1.5 text-xxs leading-snug text-white/50", children: [
|
|
7516
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "mt-[1px] text-white/30", children: "-" }),
|
|
7517
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { children: bullet })
|
|
7490
7518
|
] }, bullet)) })
|
|
7491
7519
|
] }, network);
|
|
7492
7520
|
}) })
|
|
@@ -7500,7 +7528,7 @@ function MethodChoiceChip({
|
|
|
7500
7528
|
onClick
|
|
7501
7529
|
}) {
|
|
7502
7530
|
const meta = METHOD_META[method];
|
|
7503
|
-
return /* @__PURE__ */ (0,
|
|
7531
|
+
return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
|
|
7504
7532
|
"button",
|
|
7505
7533
|
{
|
|
7506
7534
|
type: "button",
|
|
@@ -7513,14 +7541,14 @@ function MethodChoiceChip({
|
|
|
7513
7541
|
),
|
|
7514
7542
|
children: [
|
|
7515
7543
|
meta.label,
|
|
7516
|
-
!enabled && disabledReason && /* @__PURE__ */ (0,
|
|
7544
|
+
!enabled && disabledReason && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "text-xxs font-normal opacity-60", children: disabledReason })
|
|
7517
7545
|
]
|
|
7518
7546
|
}
|
|
7519
7547
|
);
|
|
7520
7548
|
}
|
|
7521
7549
|
|
|
7522
7550
|
// src/web/components/deposit-success-screen.tsx
|
|
7523
|
-
var
|
|
7551
|
+
var import_jsx_runtime75 = require("react/jsx-runtime");
|
|
7524
7552
|
function DepositSuccessScreen({
|
|
7525
7553
|
handleDone,
|
|
7526
7554
|
displayTicker,
|
|
@@ -7533,20 +7561,20 @@ function DepositSuccessScreen({
|
|
|
7533
7561
|
const isInstant = network === "lightning" || network === "spark";
|
|
7534
7562
|
const title = isInstant ? "Payment Received!" : "Deposit Detected!";
|
|
7535
7563
|
const subtitle = isInstant ? `Your ${displayTicker} has arrived via ${networkLabel}.` : `Incoming deposit detected via ${networkLabel}. Funds will be available after confirmation.`;
|
|
7536
|
-
return /* @__PURE__ */ (0,
|
|
7537
|
-
/* @__PURE__ */ (0,
|
|
7538
|
-
/* @__PURE__ */ (0,
|
|
7539
|
-
/* @__PURE__ */ (0,
|
|
7564
|
+
return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: "flex h-screen flex-col overflow-hidden bg-background font-display text-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "flex flex-1 flex-col items-center justify-center p-6 text-center", children: [
|
|
7565
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "relative mb-8", children: [
|
|
7566
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: "absolute inset-0 scale-150 animate-pulse rounded-full bg-primary/20 blur-2xl" }),
|
|
7567
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: "relative flex size-20 items-center justify-center rounded-full border-2 border-primary/40 bg-primary/10 shadow-sm", children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "material-symbols-outlined text-5xl text-primary animate-in zoom-in-50 duration-500", children: "check_circle" }) })
|
|
7540
7568
|
] }),
|
|
7541
|
-
/* @__PURE__ */ (0,
|
|
7542
|
-
/* @__PURE__ */ (0,
|
|
7543
|
-
/* @__PURE__ */ (0,
|
|
7544
|
-
/* @__PURE__ */ (0,
|
|
7545
|
-
/* @__PURE__ */ (0,
|
|
7546
|
-
/* @__PURE__ */ (0,
|
|
7547
|
-
/* @__PURE__ */ (0,
|
|
7569
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsx)("h1", { className: "mb-2 text-2xl font-bold text-white", children: title }),
|
|
7570
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsx)("p", { className: "mb-8 max-w-[260px] text-sm leading-relaxed text-muted-foreground", children: subtitle }),
|
|
7571
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "mb-10 flex items-center gap-3 rounded-2xl border bg-white/5 px-4 py-3", children: [
|
|
7572
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsx)(AssetIcon, { ticker: displayTicker, size: 36 }),
|
|
7573
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "text-left", children: [
|
|
7574
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsx)("p", { className: "text-sm font-bold text-white", children: displayTicker }),
|
|
7575
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsx)("p", { className: "text-xs text-white/40", children: selectedAsset?.name ?? displayTicker })
|
|
7548
7576
|
] }),
|
|
7549
|
-
/* @__PURE__ */ (0,
|
|
7577
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
|
|
7550
7578
|
"div",
|
|
7551
7579
|
{
|
|
7552
7580
|
className: cn(
|
|
@@ -7557,27 +7585,27 @@ function DepositSuccessScreen({
|
|
|
7557
7585
|
),
|
|
7558
7586
|
children: [
|
|
7559
7587
|
net.icon,
|
|
7560
|
-
/* @__PURE__ */ (0,
|
|
7588
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { children: networkLabel })
|
|
7561
7589
|
]
|
|
7562
7590
|
}
|
|
7563
7591
|
)
|
|
7564
7592
|
] }),
|
|
7565
|
-
/* @__PURE__ */ (0,
|
|
7566
|
-
/* @__PURE__ */ (0,
|
|
7593
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(Button, { variant: "cta", size: "cta", onClick: handleDone, children: [
|
|
7594
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "material-symbols-outlined text-icon-lg", children: "account_balance_wallet" }),
|
|
7567
7595
|
"Back to Wallet"
|
|
7568
7596
|
] })
|
|
7569
7597
|
] }) });
|
|
7570
7598
|
}
|
|
7571
7599
|
|
|
7572
7600
|
// src/web/components/deposit-network-default-modal.tsx
|
|
7573
|
-
var
|
|
7601
|
+
var import_jsx_runtime76 = require("react/jsx-runtime");
|
|
7574
7602
|
var NETWORK_OPTIONS = {
|
|
7575
7603
|
RGB: {
|
|
7576
7604
|
network: "onchain",
|
|
7577
7605
|
account: "RGB",
|
|
7578
7606
|
label: "On-chain / Lightning",
|
|
7579
7607
|
description: "Classic Bitcoin address or Lightning invoice via the RLN node.",
|
|
7580
|
-
icon: /* @__PURE__ */ (0,
|
|
7608
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "material-symbols-outlined text-icon-lg", children: "link" }),
|
|
7581
7609
|
accentBg: "bg-network-bitcoin/10",
|
|
7582
7610
|
accentBorder: "border-network-bitcoin/30",
|
|
7583
7611
|
accentText: "text-network-bitcoin"
|
|
@@ -7587,7 +7615,7 @@ var NETWORK_OPTIONS = {
|
|
|
7587
7615
|
account: "SPARK",
|
|
7588
7616
|
label: "Spark",
|
|
7589
7617
|
description: "Receive directly into your Spark account. Fast and free.",
|
|
7590
|
-
icon: /* @__PURE__ */ (0,
|
|
7618
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("img", { src: "/icons/spark/Asterisk/Spark Asterisk White.svg", alt: "", className: "h-[18px]" }),
|
|
7591
7619
|
accentBg: "bg-info/10",
|
|
7592
7620
|
accentBorder: "border-info/30",
|
|
7593
7621
|
accentText: "text-info"
|
|
@@ -7597,7 +7625,7 @@ var NETWORK_OPTIONS = {
|
|
|
7597
7625
|
account: "ARKADE",
|
|
7598
7626
|
label: "Arkade",
|
|
7599
7627
|
description: "Receive directly into your Arkade account. Low fees, near-instant settlement.",
|
|
7600
|
-
icon: /* @__PURE__ */ (0,
|
|
7628
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("img", { src: "/icons/arkade/arkade-icon.svg", alt: "", className: "h-[18px]" }),
|
|
7601
7629
|
accentBg: "bg-network-arkade/10",
|
|
7602
7630
|
accentBorder: "border-network-arkade/30",
|
|
7603
7631
|
accentText: "text-network-arkade"
|
|
@@ -7612,20 +7640,20 @@ function DepositNetworkDefaultModal({
|
|
|
7612
7640
|
}) {
|
|
7613
7641
|
if (!open) return null;
|
|
7614
7642
|
const options = availableAccounts.map((id) => NETWORK_OPTIONS[id]).filter(Boolean);
|
|
7615
|
-
return /* @__PURE__ */ (0,
|
|
7616
|
-
/* @__PURE__ */ (0,
|
|
7617
|
-
/* @__PURE__ */ (0,
|
|
7618
|
-
/* @__PURE__ */ (0,
|
|
7619
|
-
/* @__PURE__ */ (0,
|
|
7643
|
+
return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "fixed inset-0 z-50 flex items-end justify-center bg-black/60 backdrop-blur-sm", children: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "w-full space-y-4 rounded-t-2xl border-t border-border bg-background px-4 pb-7 pt-5 animate-in slide-in-from-bottom-4 duration-200", children: [
|
|
7644
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "-mt-1 mb-1 flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "h-1 w-10 rounded-full bg-white/15" }) }),
|
|
7645
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { children: [
|
|
7646
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsx)("p", { className: "text-sm font-bold text-white", children: "Choose your default network" }),
|
|
7647
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("p", { className: "mt-0.5 text-tiny text-white/45", children: [
|
|
7620
7648
|
"Pick how you would like to receive",
|
|
7621
7649
|
" ",
|
|
7622
|
-
/* @__PURE__ */ (0,
|
|
7650
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "font-semibold text-muted-foreground", children: assetTicker }),
|
|
7623
7651
|
" by default. You can always switch in the deposit screen."
|
|
7624
7652
|
] })
|
|
7625
7653
|
] }),
|
|
7626
|
-
/* @__PURE__ */ (0,
|
|
7654
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "space-y-2", children: options.map((option) => {
|
|
7627
7655
|
const isSuggested = option.account === suggestedAccount;
|
|
7628
|
-
return /* @__PURE__ */ (0,
|
|
7656
|
+
return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
|
|
7629
7657
|
"button",
|
|
7630
7658
|
{
|
|
7631
7659
|
type: "button",
|
|
@@ -7635,7 +7663,7 @@ function DepositNetworkDefaultModal({
|
|
|
7635
7663
|
isSuggested ? cn("border-2", option.accentBorder, option.accentBg) : "border border-white/8 bg-white/4 hover:bg-white/8"
|
|
7636
7664
|
),
|
|
7637
7665
|
children: [
|
|
7638
|
-
/* @__PURE__ */ (0,
|
|
7666
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
|
|
7639
7667
|
"div",
|
|
7640
7668
|
{
|
|
7641
7669
|
className: cn(
|
|
@@ -7646,10 +7674,10 @@ function DepositNetworkDefaultModal({
|
|
|
7646
7674
|
children: option.icon
|
|
7647
7675
|
}
|
|
7648
7676
|
),
|
|
7649
|
-
/* @__PURE__ */ (0,
|
|
7650
|
-
/* @__PURE__ */ (0,
|
|
7651
|
-
/* @__PURE__ */ (0,
|
|
7652
|
-
isSuggested && /* @__PURE__ */ (0,
|
|
7677
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "min-w-0 flex-1", children: [
|
|
7678
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
7679
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: cn("text-xs font-bold", isSuggested ? option.accentText : "text-white"), children: option.label }),
|
|
7680
|
+
isSuggested && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
|
|
7653
7681
|
"span",
|
|
7654
7682
|
{
|
|
7655
7683
|
className: cn(
|
|
@@ -7661,9 +7689,9 @@ function DepositNetworkDefaultModal({
|
|
|
7661
7689
|
}
|
|
7662
7690
|
)
|
|
7663
7691
|
] }),
|
|
7664
|
-
/* @__PURE__ */ (0,
|
|
7692
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsx)("p", { className: "mt-0.5 text-xxs leading-snug text-white/45", children: option.description })
|
|
7665
7693
|
] }),
|
|
7666
|
-
/* @__PURE__ */ (0,
|
|
7694
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
|
|
7667
7695
|
"span",
|
|
7668
7696
|
{
|
|
7669
7697
|
className: cn(
|
|
@@ -7683,7 +7711,7 @@ function DepositNetworkDefaultModal({
|
|
|
7683
7711
|
|
|
7684
7712
|
// src/web/components/btc-unified-receive.tsx
|
|
7685
7713
|
var import_react16 = require("react");
|
|
7686
|
-
var
|
|
7714
|
+
var import_jsx_runtime77 = require("react/jsx-runtime");
|
|
7687
7715
|
function formatSatsForRow(value) {
|
|
7688
7716
|
if (!value || value <= 0 || !Number.isFinite(value)) return null;
|
|
7689
7717
|
return `${value.toLocaleString("en-US")} sats`;
|
|
@@ -7715,46 +7743,46 @@ function BtcUnifiedReceive({
|
|
|
7715
7743
|
setInvoiceStatus(null);
|
|
7716
7744
|
setAccountReceiveResult(null);
|
|
7717
7745
|
};
|
|
7718
|
-
return /* @__PURE__ */ (0,
|
|
7719
|
-
/* @__PURE__ */ (0,
|
|
7720
|
-
/* @__PURE__ */ (0,
|
|
7721
|
-
/* @__PURE__ */ (0,
|
|
7722
|
-
isInvoicePaid && /* @__PURE__ */ (0,
|
|
7746
|
+
return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "space-y-3 animate-in fade-in zoom-in-95 duration-300", children: [
|
|
7747
|
+
/* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "flex flex-col items-center gap-3", children: [
|
|
7748
|
+
/* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "relative flex flex-col items-center p-2", children: [
|
|
7749
|
+
/* @__PURE__ */ (0, import_jsx_runtime77.jsx)(QrCode, { value: accountReceiveResult.qrValue, size: 200, tone: "onDark" }),
|
|
7750
|
+
isInvoicePaid && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(PaidOverlay, {})
|
|
7723
7751
|
] }),
|
|
7724
|
-
/* @__PURE__ */ (0,
|
|
7725
|
-
/* @__PURE__ */ (0,
|
|
7752
|
+
/* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "flex items-center justify-center gap-2.5", children: [
|
|
7753
|
+
/* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
|
|
7726
7754
|
Button,
|
|
7727
7755
|
{
|
|
7728
7756
|
variant: "surface",
|
|
7729
7757
|
size: "icon-xl",
|
|
7730
7758
|
"aria-label": `Copy ${accountReceiveResult.qrLabel}`,
|
|
7731
7759
|
onClick: () => void copyToClipboard(accountReceiveResult.qrValue),
|
|
7732
|
-
children: /* @__PURE__ */ (0,
|
|
7760
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(Icon, { name: isQrCopied ? "check" : "content_copy", size: "lg" })
|
|
7733
7761
|
}
|
|
7734
7762
|
),
|
|
7735
|
-
showRegenerate && /* @__PURE__ */ (0,
|
|
7763
|
+
showRegenerate && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
|
|
7736
7764
|
Button,
|
|
7737
7765
|
{
|
|
7738
7766
|
variant: "surface",
|
|
7739
7767
|
size: "icon-xl",
|
|
7740
7768
|
"aria-label": "New address",
|
|
7741
7769
|
onClick: handleNewAddress,
|
|
7742
|
-
children: /* @__PURE__ */ (0,
|
|
7770
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(Icon, { name: "refresh", size: "lg" })
|
|
7743
7771
|
}
|
|
7744
7772
|
),
|
|
7745
|
-
/* @__PURE__ */ (0,
|
|
7773
|
+
/* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
|
|
7746
7774
|
Button,
|
|
7747
7775
|
{
|
|
7748
7776
|
variant: "surface",
|
|
7749
7777
|
size: "icon-xl",
|
|
7750
7778
|
"aria-label": "Edit amount and description",
|
|
7751
7779
|
onClick: () => setShowEdit(true),
|
|
7752
|
-
children: /* @__PURE__ */ (0,
|
|
7780
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(Icon, { name: "edit", size: "lg" })
|
|
7753
7781
|
}
|
|
7754
7782
|
)
|
|
7755
7783
|
] })
|
|
7756
7784
|
] }),
|
|
7757
|
-
invoiceStatus && /* @__PURE__ */ (0,
|
|
7785
|
+
invoiceStatus && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
|
|
7758
7786
|
InvoiceStatusBanner,
|
|
7759
7787
|
{
|
|
7760
7788
|
isInvoicePending,
|
|
@@ -7763,11 +7791,11 @@ function BtcUnifiedReceive({
|
|
|
7763
7791
|
invoiceStatus
|
|
7764
7792
|
}
|
|
7765
7793
|
),
|
|
7766
|
-
/* @__PURE__ */ (0,
|
|
7767
|
-
/* @__PURE__ */ (0,
|
|
7794
|
+
/* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "space-y-1.5", children: [
|
|
7795
|
+
/* @__PURE__ */ (0, import_jsx_runtime77.jsx)("p", { className: "text-xxs font-bold uppercase tracking-widest text-white/30", children: "Available Addresses" }),
|
|
7768
7796
|
accountReceiveResult.addresses.map((address) => {
|
|
7769
7797
|
const network = NETWORK_CONFIG[address.network];
|
|
7770
|
-
return /* @__PURE__ */ (0,
|
|
7798
|
+
return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(
|
|
7771
7799
|
"div",
|
|
7772
7800
|
{
|
|
7773
7801
|
className: cn(
|
|
@@ -7777,35 +7805,35 @@ function BtcUnifiedReceive({
|
|
|
7777
7805
|
style: { borderLeftWidth: 3, borderLeftColor: network.color },
|
|
7778
7806
|
onClick: () => void copyToClipboard(address.value),
|
|
7779
7807
|
children: [
|
|
7780
|
-
/* @__PURE__ */ (0,
|
|
7781
|
-
/* @__PURE__ */ (0,
|
|
7782
|
-
/* @__PURE__ */ (0,
|
|
7783
|
-
/* @__PURE__ */ (0,
|
|
7808
|
+
/* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: cn("flex size-5 flex-shrink-0 items-center justify-center rounded-md", network.bg), children: network.icon }),
|
|
7809
|
+
/* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "min-w-0 flex-1", children: [
|
|
7810
|
+
/* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "flex items-center gap-1.5", children: [
|
|
7811
|
+
/* @__PURE__ */ (0, import_jsx_runtime77.jsx)("p", { className: cn("text-xxs font-bold uppercase tracking-widest", network.text), children: address.label }),
|
|
7784
7812
|
(() => {
|
|
7785
7813
|
const amountLabel = formatSatsForRow(address.amountSats);
|
|
7786
|
-
return amountLabel ? /* @__PURE__ */ (0,
|
|
7814
|
+
return amountLabel ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("span", { className: "rounded-full bg-white/10 px-1.5 py-0.5 text-tiny font-bold tabular-nums text-white/70", children: amountLabel }) : null;
|
|
7787
7815
|
})()
|
|
7788
7816
|
] }),
|
|
7789
|
-
/* @__PURE__ */ (0,
|
|
7817
|
+
/* @__PURE__ */ (0, import_jsx_runtime77.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 })
|
|
7790
7818
|
] }),
|
|
7791
|
-
/* @__PURE__ */ (0,
|
|
7819
|
+
/* @__PURE__ */ (0, import_jsx_runtime77.jsx)(CopyIcon, { copied: copied === address.value })
|
|
7792
7820
|
]
|
|
7793
7821
|
},
|
|
7794
7822
|
address.network
|
|
7795
7823
|
);
|
|
7796
7824
|
})
|
|
7797
7825
|
] }),
|
|
7798
|
-
/* @__PURE__ */ (0,
|
|
7826
|
+
/* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
|
|
7799
7827
|
BottomSheet,
|
|
7800
7828
|
{
|
|
7801
7829
|
open: showEdit,
|
|
7802
7830
|
title: "Edit request",
|
|
7803
|
-
icon: /* @__PURE__ */ (0,
|
|
7831
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(Icon, { name: "edit", size: "md" }),
|
|
7804
7832
|
onClose: () => setShowEdit(false),
|
|
7805
|
-
children: /* @__PURE__ */ (0,
|
|
7806
|
-
/* @__PURE__ */ (0,
|
|
7807
|
-
/* @__PURE__ */ (0,
|
|
7808
|
-
/* @__PURE__ */ (0,
|
|
7833
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "space-y-4", children: [
|
|
7834
|
+
/* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "space-y-1.5", children: [
|
|
7835
|
+
/* @__PURE__ */ (0, import_jsx_runtime77.jsx)("label", { className: "text-xxs font-bold uppercase tracking-widest text-white/40", children: "Amount (optional)" }),
|
|
7836
|
+
/* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
|
|
7809
7837
|
"input",
|
|
7810
7838
|
{
|
|
7811
7839
|
type: "text",
|
|
@@ -7816,14 +7844,14 @@ function BtcUnifiedReceive({
|
|
|
7816
7844
|
inputMode: "decimal"
|
|
7817
7845
|
}
|
|
7818
7846
|
),
|
|
7819
|
-
amount && loading && /* @__PURE__ */ (0,
|
|
7820
|
-
/* @__PURE__ */ (0,
|
|
7847
|
+
amount && loading && /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("p", { className: "flex items-center gap-1 text-xxs text-warning/70", children: [
|
|
7848
|
+
/* @__PURE__ */ (0, import_jsx_runtime77.jsx)("span", { className: "material-symbols-outlined animate-spin text-icon-xxs", children: "progress_activity" }),
|
|
7821
7849
|
"Updating invoice..."
|
|
7822
7850
|
] })
|
|
7823
7851
|
] }),
|
|
7824
|
-
onDescriptionChange && /* @__PURE__ */ (0,
|
|
7825
|
-
/* @__PURE__ */ (0,
|
|
7826
|
-
/* @__PURE__ */ (0,
|
|
7852
|
+
onDescriptionChange && /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "space-y-1.5", children: [
|
|
7853
|
+
/* @__PURE__ */ (0, import_jsx_runtime77.jsx)("label", { className: "text-xxs font-bold uppercase tracking-widest text-white/40", children: "Description (optional)" }),
|
|
7854
|
+
/* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
|
|
7827
7855
|
"input",
|
|
7828
7856
|
{
|
|
7829
7857
|
type: "text",
|
|
@@ -7834,7 +7862,7 @@ function BtcUnifiedReceive({
|
|
|
7834
7862
|
}
|
|
7835
7863
|
)
|
|
7836
7864
|
] }),
|
|
7837
|
-
/* @__PURE__ */ (0,
|
|
7865
|
+
/* @__PURE__ */ (0, import_jsx_runtime77.jsx)(Button, { variant: "cta", className: "w-full", onClick: () => setShowEdit(false), children: "Done" })
|
|
7838
7866
|
] })
|
|
7839
7867
|
}
|
|
7840
7868
|
)
|
|
@@ -7842,7 +7870,7 @@ function BtcUnifiedReceive({
|
|
|
7842
7870
|
}
|
|
7843
7871
|
|
|
7844
7872
|
// src/web/components/deposit-generated-view.tsx
|
|
7845
|
-
var
|
|
7873
|
+
var import_jsx_runtime78 = require("react/jsx-runtime");
|
|
7846
7874
|
function parseAssetAmount(amountString, asset) {
|
|
7847
7875
|
const value = Number(amountString);
|
|
7848
7876
|
if (!Number.isFinite(value)) return 0;
|
|
@@ -7883,10 +7911,10 @@ function DepositGeneratedView({
|
|
|
7883
7911
|
showRegenerate = true,
|
|
7884
7912
|
onRegenerate
|
|
7885
7913
|
}) {
|
|
7886
|
-
return /* @__PURE__ */ (0,
|
|
7887
|
-
(network === "lightning" || network === "arkade" && arkSubMode === "ark") && isBtc && /* @__PURE__ */ (0,
|
|
7888
|
-
/* @__PURE__ */ (0,
|
|
7889
|
-
/* @__PURE__ */ (0,
|
|
7914
|
+
return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "space-y-3 animate-in fade-in zoom-in-95 duration-300", children: [
|
|
7915
|
+
(network === "lightning" || network === "arkade" && arkSubMode === "ark") && isBtc && /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex flex-col gap-1.5 rounded-xl border border-white/8 bg-white/3 p-2.5", children: [
|
|
7916
|
+
/* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "flex items-center justify-between px-1", children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("label", { className: "text-xxs font-bold uppercase tracking-widest text-white/40", children: "Specify amount (optional)" }) }),
|
|
7917
|
+
/* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
|
|
7890
7918
|
"input",
|
|
7891
7919
|
{
|
|
7892
7920
|
type: "text",
|
|
@@ -7897,16 +7925,16 @@ function DepositGeneratedView({
|
|
|
7897
7925
|
inputMode: "decimal"
|
|
7898
7926
|
}
|
|
7899
7927
|
),
|
|
7900
|
-
amount && /* @__PURE__ */ (0,
|
|
7901
|
-
/* @__PURE__ */ (0,
|
|
7928
|
+
amount && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("p", { className: "text-xxs text-warning/70", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("span", { className: "flex items-center gap-1", children: [
|
|
7929
|
+
/* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "material-symbols-outlined animate-spin text-icon-xxs", children: "progress_activity" }),
|
|
7902
7930
|
"Updating ",
|
|
7903
7931
|
network === "arkade" ? "URI" : "invoice",
|
|
7904
7932
|
"..."
|
|
7905
7933
|
] }) : network === "arkade" ? `Unified URI for ${amount} ${getUnitLabel()}` : `Invoice for ${amount} ${getUnitLabel()}` })
|
|
7906
7934
|
] }),
|
|
7907
|
-
network === "lightning" && !isBtc && /* @__PURE__ */ (0,
|
|
7908
|
-
/* @__PURE__ */ (0,
|
|
7909
|
-
/* @__PURE__ */ (0,
|
|
7935
|
+
network === "lightning" && !isBtc && /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex flex-col gap-1.5 rounded-xl border border-white/8 bg-white/3 p-2.5", children: [
|
|
7936
|
+
/* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "flex items-center justify-between px-1", children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("label", { className: "text-xxs font-bold uppercase tracking-widest text-white/40", children: "Specify amount (optional)" }) }),
|
|
7937
|
+
/* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
|
|
7910
7938
|
"input",
|
|
7911
7939
|
{
|
|
7912
7940
|
type: "text",
|
|
@@ -7917,19 +7945,19 @@ function DepositGeneratedView({
|
|
|
7917
7945
|
inputMode: "decimal"
|
|
7918
7946
|
}
|
|
7919
7947
|
),
|
|
7920
|
-
amount && /* @__PURE__ */ (0,
|
|
7921
|
-
/* @__PURE__ */ (0,
|
|
7948
|
+
amount && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("p", { className: "text-xxs text-warning/70", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("span", { className: "flex items-center gap-1", children: [
|
|
7949
|
+
/* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "material-symbols-outlined animate-spin text-icon-xxs", children: "progress_activity" }),
|
|
7922
7950
|
"Updating invoice..."
|
|
7923
7951
|
] }) : `Invoice for ${amount} ${getUnitLabel()}` }),
|
|
7924
|
-
amount && maxDepositAmount > 0 && parseAssetAmount(amount, selectedAsset) > maxDepositAmount && /* @__PURE__ */ (0,
|
|
7952
|
+
amount && maxDepositAmount > 0 && parseAssetAmount(amount, selectedAsset) > maxDepositAmount && /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("p", { className: "rounded-lg border border-danger/20 bg-danger/10 px-2.5 py-1.5 text-xxs text-danger", children: [
|
|
7925
7953
|
"Exceeds max: ",
|
|
7926
7954
|
formatAssetAmount(maxDepositAmount, selectedAsset),
|
|
7927
7955
|
" ",
|
|
7928
7956
|
getUnitLabel()
|
|
7929
7957
|
] })
|
|
7930
7958
|
] }),
|
|
7931
|
-
/* @__PURE__ */ (0,
|
|
7932
|
-
/* @__PURE__ */ (0,
|
|
7959
|
+
/* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex flex-col items-center gap-3", children: [
|
|
7960
|
+
/* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
|
|
7933
7961
|
"div",
|
|
7934
7962
|
{
|
|
7935
7963
|
className: cn(
|
|
@@ -7938,7 +7966,7 @@ function DepositGeneratedView({
|
|
|
7938
7966
|
),
|
|
7939
7967
|
style: net.qrGlow,
|
|
7940
7968
|
children: [
|
|
7941
|
-
showQrNetworkBadge && network !== "spark" && network !== "arkade" && /* @__PURE__ */ (0,
|
|
7969
|
+
showQrNetworkBadge && network !== "spark" && network !== "arkade" && /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
|
|
7942
7970
|
"div",
|
|
7943
7971
|
{
|
|
7944
7972
|
className: cn(
|
|
@@ -7948,21 +7976,21 @@ function DepositGeneratedView({
|
|
|
7948
7976
|
),
|
|
7949
7977
|
children: [
|
|
7950
7978
|
net.icon,
|
|
7951
|
-
/* @__PURE__ */ (0,
|
|
7979
|
+
/* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { children: net.label })
|
|
7952
7980
|
]
|
|
7953
7981
|
}
|
|
7954
7982
|
),
|
|
7955
|
-
/* @__PURE__ */ (0,
|
|
7956
|
-
isInvoicePaid && /* @__PURE__ */ (0,
|
|
7983
|
+
/* @__PURE__ */ (0, import_jsx_runtime78.jsx)(QrCode, { value: address, size: 188 }),
|
|
7984
|
+
isInvoicePaid && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(PaidOverlay, {}),
|
|
7957
7985
|
loading && !isInvoicePaid && // Loading scrim — sits over the QR while a fresh address/invoice
|
|
7958
7986
|
// is being fetched (e.g. after the New Address button).
|
|
7959
|
-
/* @__PURE__ */ (0,
|
|
7987
|
+
/* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "absolute inset-0 flex items-center justify-center rounded-2xl bg-white/80 backdrop-blur-sm", children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "material-symbols-outlined animate-spin text-icon-3xl text-network-bitcoin", children: "progress_activity" }) })
|
|
7960
7988
|
]
|
|
7961
7989
|
}
|
|
7962
7990
|
),
|
|
7963
7991
|
(() => {
|
|
7964
7992
|
const isAddressCopied = copied === address;
|
|
7965
|
-
return /* @__PURE__ */ (0,
|
|
7993
|
+
return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
|
|
7966
7994
|
"button",
|
|
7967
7995
|
{
|
|
7968
7996
|
type: "button",
|
|
@@ -7975,14 +8003,14 @@ function DepositGeneratedView({
|
|
|
7975
8003
|
void copyToClipboard(address);
|
|
7976
8004
|
},
|
|
7977
8005
|
children: [
|
|
7978
|
-
/* @__PURE__ */ (0,
|
|
8006
|
+
/* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Icon, { name: isAddressCopied ? "check" : "content_copy", size: "xs" }),
|
|
7979
8007
|
isAddressCopied ? "Copied" : network === "lightning" ? "Copy Invoice" : "Copy Address"
|
|
7980
8008
|
]
|
|
7981
8009
|
}
|
|
7982
8010
|
);
|
|
7983
8011
|
})()
|
|
7984
8012
|
] }),
|
|
7985
|
-
network === "lightning" && invoiceStatus && /* @__PURE__ */ (0,
|
|
8013
|
+
network === "lightning" && invoiceStatus && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
|
|
7986
8014
|
InvoiceStatusBanner,
|
|
7987
8015
|
{
|
|
7988
8016
|
isInvoicePending,
|
|
@@ -7991,7 +8019,7 @@ function DepositGeneratedView({
|
|
|
7991
8019
|
invoiceStatus
|
|
7992
8020
|
}
|
|
7993
8021
|
),
|
|
7994
|
-
/* @__PURE__ */ (0,
|
|
8022
|
+
/* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
|
|
7995
8023
|
"div",
|
|
7996
8024
|
{
|
|
7997
8025
|
"data-testid": "deposit-generated-address",
|
|
@@ -8004,16 +8032,16 @@ function DepositGeneratedView({
|
|
|
8004
8032
|
style: { borderLeftWidth: 3, borderLeftColor: net.color },
|
|
8005
8033
|
onClick: () => void copyToClipboard(address),
|
|
8006
8034
|
children: [
|
|
8007
|
-
/* @__PURE__ */ (0,
|
|
8008
|
-
/* @__PURE__ */ (0,
|
|
8009
|
-
/* @__PURE__ */ (0,
|
|
8010
|
-
/* @__PURE__ */ (0,
|
|
8035
|
+
/* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: cn("flex size-5 flex-shrink-0 items-center justify-center rounded-md", net.bg), children: net.icon }),
|
|
8036
|
+
/* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "min-w-0 flex-1", children: [
|
|
8037
|
+
/* @__PURE__ */ (0, import_jsx_runtime78.jsx)("p", { className: cn("text-xxs font-bold uppercase tracking-widest", net.text), children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { "data-testid": "deposit-address-label", children: addressLabel }) }),
|
|
8038
|
+
/* @__PURE__ */ (0, import_jsx_runtime78.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 })
|
|
8011
8039
|
] }),
|
|
8012
|
-
/* @__PURE__ */ (0,
|
|
8040
|
+
/* @__PURE__ */ (0, import_jsx_runtime78.jsx)(CopyIcon, { copied: copied === address })
|
|
8013
8041
|
]
|
|
8014
8042
|
}
|
|
8015
8043
|
),
|
|
8016
|
-
recipientId && /* @__PURE__ */ (0,
|
|
8044
|
+
recipientId && /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
|
|
8017
8045
|
"div",
|
|
8018
8046
|
{
|
|
8019
8047
|
className: cn(
|
|
@@ -8023,16 +8051,16 @@ function DepositGeneratedView({
|
|
|
8023
8051
|
style: { borderLeftWidth: 3, borderLeftColor: "var(--primary)" },
|
|
8024
8052
|
onClick: () => void copyToClipboard(recipientId),
|
|
8025
8053
|
children: [
|
|
8026
|
-
/* @__PURE__ */ (0,
|
|
8027
|
-
/* @__PURE__ */ (0,
|
|
8028
|
-
/* @__PURE__ */ (0,
|
|
8029
|
-
/* @__PURE__ */ (0,
|
|
8054
|
+
/* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "flex size-5 flex-shrink-0 items-center justify-center rounded-md bg-primary/15", children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Icon, { name: "person", size: "xs", className: "text-primary" }) }),
|
|
8055
|
+
/* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "min-w-0 flex-1", children: [
|
|
8056
|
+
/* @__PURE__ */ (0, import_jsx_runtime78.jsx)("p", { className: "text-xxs font-bold uppercase tracking-widest text-primary", children: "Recipient ID" }),
|
|
8057
|
+
/* @__PURE__ */ (0, import_jsx_runtime78.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 })
|
|
8030
8058
|
] }),
|
|
8031
|
-
/* @__PURE__ */ (0,
|
|
8059
|
+
/* @__PURE__ */ (0, import_jsx_runtime78.jsx)(CopyIcon, { copied: copied === recipientId })
|
|
8032
8060
|
]
|
|
8033
8061
|
}
|
|
8034
8062
|
),
|
|
8035
|
-
showRegenerate && /* @__PURE__ */ (0,
|
|
8063
|
+
showRegenerate && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "flex justify-center pt-1", children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
|
|
8036
8064
|
"button",
|
|
8037
8065
|
{
|
|
8038
8066
|
type: "button",
|
|
@@ -8050,7 +8078,7 @@ function DepositGeneratedView({
|
|
|
8050
8078
|
setInvoiceStatus(null);
|
|
8051
8079
|
},
|
|
8052
8080
|
className: "flex size-10 items-center justify-center rounded-full bg-primary/15 text-primary transition-all hover:bg-primary/25 active:scale-[0.98] disabled:opacity-50",
|
|
8053
|
-
children: /* @__PURE__ */ (0,
|
|
8081
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
|
|
8054
8082
|
"span",
|
|
8055
8083
|
{
|
|
8056
8084
|
className: cn("material-symbols-outlined text-icon-md", loading && "animate-spin"),
|
|
@@ -8063,7 +8091,7 @@ function DepositGeneratedView({
|
|
|
8063
8091
|
}
|
|
8064
8092
|
|
|
8065
8093
|
// src/web/components/deposit-pre-generation.tsx
|
|
8066
|
-
var
|
|
8094
|
+
var import_jsx_runtime79 = require("react/jsx-runtime");
|
|
8067
8095
|
var ACCOUNT_TITLES = {
|
|
8068
8096
|
RGB: "RGB & Lightning",
|
|
8069
8097
|
SPARK: "Spark",
|
|
@@ -8108,58 +8136,58 @@ function DepositPreGeneration({
|
|
|
8108
8136
|
}) {
|
|
8109
8137
|
const method = METHOD_META2[currentMethod];
|
|
8110
8138
|
const isRgbOnchain = network === "onchain" && !isBtc;
|
|
8111
|
-
return /* @__PURE__ */ (0,
|
|
8112
|
-
showReceiveSummary && /* @__PURE__ */ (0,
|
|
8113
|
-
/* @__PURE__ */ (0,
|
|
8114
|
-
/* @__PURE__ */ (0,
|
|
8115
|
-
/* @__PURE__ */ (0,
|
|
8116
|
-
/* @__PURE__ */ (0,
|
|
8117
|
-
/* @__PURE__ */ (0,
|
|
8139
|
+
return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "space-y-3", children: [
|
|
8140
|
+
showReceiveSummary && /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "rounded-2xl border border-white/8 bg-white/4 p-3", children: [
|
|
8141
|
+
/* @__PURE__ */ (0, import_jsx_runtime79.jsx)("p", { className: "text-xxs font-bold uppercase tracking-widest text-white/35", children: "Receive Summary" }),
|
|
8142
|
+
/* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "mt-2 grid grid-cols-1 gap-2 text-xs", children: [
|
|
8143
|
+
/* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
|
|
8144
|
+
/* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: "text-white/45", children: "Asset" }),
|
|
8145
|
+
/* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: "font-bold text-white", children: selectedAsset?.ticker ?? (isBtc ? "BTC" : "Asset") })
|
|
8118
8146
|
] }),
|
|
8119
|
-
/* @__PURE__ */ (0,
|
|
8120
|
-
/* @__PURE__ */ (0,
|
|
8121
|
-
/* @__PURE__ */ (0,
|
|
8147
|
+
/* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
|
|
8148
|
+
/* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: "text-white/45", children: "Destination account" }),
|
|
8149
|
+
/* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: "font-bold text-white", children: ACCOUNT_TITLES[selectedAccount] })
|
|
8122
8150
|
] }),
|
|
8123
|
-
/* @__PURE__ */ (0,
|
|
8124
|
-
/* @__PURE__ */ (0,
|
|
8125
|
-
/* @__PURE__ */ (0,
|
|
8151
|
+
/* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
|
|
8152
|
+
/* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: "text-white/45", children: "Transfer method" }),
|
|
8153
|
+
/* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: "font-bold text-white", children: method.label })
|
|
8126
8154
|
] }),
|
|
8127
|
-
/* @__PURE__ */ (0,
|
|
8155
|
+
/* @__PURE__ */ (0, import_jsx_runtime79.jsx)("p", { className: "text-tiny text-white/35", children: method.summary })
|
|
8128
8156
|
] })
|
|
8129
8157
|
] }),
|
|
8130
|
-
channelsLoading && selectedAccount === "RGB" && currentMethod === "lightning" && !isBtc && /* @__PURE__ */ (0,
|
|
8131
|
-
/* @__PURE__ */ (0,
|
|
8132
|
-
/* @__PURE__ */ (0,
|
|
8158
|
+
channelsLoading && selectedAccount === "RGB" && currentMethod === "lightning" && !isBtc && /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex items-center gap-2.5 rounded-xl border bg-card p-3", children: [
|
|
8159
|
+
/* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: "material-symbols-outlined animate-spin text-icon-lg text-primary", children: "progress_activity" }),
|
|
8160
|
+
/* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: "text-xs font-medium text-white/60", children: "Checking channel availability..." })
|
|
8133
8161
|
] }),
|
|
8134
|
-
showChannelWarning && /* @__PURE__ */ (0,
|
|
8135
|
-
/* @__PURE__ */ (0,
|
|
8136
|
-
/* @__PURE__ */ (0,
|
|
8162
|
+
showChannelWarning && /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(AlertBanner, { variant: "warning", children: [
|
|
8163
|
+
/* @__PURE__ */ (0, import_jsx_runtime79.jsx)("p", { className: "mb-0.5 text-xs font-bold text-warning", children: "No Lightning Channels" }),
|
|
8164
|
+
/* @__PURE__ */ (0, import_jsx_runtime79.jsx)("p", { className: "text-tiny text-warning/70", children: "Only on-chain deposits are available." })
|
|
8137
8165
|
] }),
|
|
8138
|
-
showLiquidityWarning && /* @__PURE__ */ (0,
|
|
8139
|
-
/* @__PURE__ */ (0,
|
|
8140
|
-
/* @__PURE__ */ (0,
|
|
8166
|
+
showLiquidityWarning && /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(AlertBanner, { variant: "warning", children: [
|
|
8167
|
+
/* @__PURE__ */ (0, import_jsx_runtime79.jsx)("p", { className: "mb-0.5 text-xs font-bold text-warning", children: "No Inbound Liquidity" }),
|
|
8168
|
+
/* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("p", { className: "text-tiny text-warning/70", children: [
|
|
8141
8169
|
"No channels with inbound capacity for ",
|
|
8142
8170
|
selectedAsset?.ticker ?? "this asset",
|
|
8143
8171
|
"."
|
|
8144
8172
|
] })
|
|
8145
8173
|
] }),
|
|
8146
|
-
isAutoGenerate && loading && /* @__PURE__ */ (0,
|
|
8147
|
-
/* @__PURE__ */ (0,
|
|
8148
|
-
/* @__PURE__ */ (0,
|
|
8149
|
-
/* @__PURE__ */ (0,
|
|
8174
|
+
isAutoGenerate && loading && /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex flex-col items-center gap-4 py-10", children: [
|
|
8175
|
+
/* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: cn("flex size-16 items-center justify-center rounded-2xl border", net.bg, net.border), children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: cn("material-symbols-outlined animate-spin text-icon-4xl", net.text), children: "progress_activity" }) }),
|
|
8176
|
+
/* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "space-y-1 text-center", children: [
|
|
8177
|
+
/* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("p", { className: "text-sm font-bold text-muted-foreground", children: [
|
|
8150
8178
|
"Generating ",
|
|
8151
8179
|
network === "lightning" ? "invoice" : "address",
|
|
8152
8180
|
"..."
|
|
8153
8181
|
] }),
|
|
8154
|
-
/* @__PURE__ */ (0,
|
|
8182
|
+
/* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("p", { className: "text-xs text-white/30", children: [
|
|
8155
8183
|
net.label,
|
|
8156
8184
|
" network"
|
|
8157
8185
|
] })
|
|
8158
8186
|
] })
|
|
8159
8187
|
] }),
|
|
8160
|
-
isRgbOnchain && isNewRgbAsset && setNewAssetId && /* @__PURE__ */ (0,
|
|
8161
|
-
/* @__PURE__ */ (0,
|
|
8162
|
-
/* @__PURE__ */ (0,
|
|
8188
|
+
isRgbOnchain && isNewRgbAsset && setNewAssetId && /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "space-y-1.5", children: [
|
|
8189
|
+
/* @__PURE__ */ (0, import_jsx_runtime79.jsx)("label", { className: "text-xxs font-bold uppercase tracking-widest text-white/40", children: "RGB Asset ID - Optional" }),
|
|
8190
|
+
/* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
|
|
8163
8191
|
"input",
|
|
8164
8192
|
{
|
|
8165
8193
|
type: "text",
|
|
@@ -8171,15 +8199,15 @@ function DepositPreGeneration({
|
|
|
8171
8199
|
className: "w-full rounded-xl border bg-white/5 px-3 py-2.5 font-mono text-sm text-white transition-all placeholder:text-white/20 focus:border-primary/50 focus:outline-none"
|
|
8172
8200
|
}
|
|
8173
8201
|
),
|
|
8174
|
-
/* @__PURE__ */ (0,
|
|
8202
|
+
/* @__PURE__ */ (0, import_jsx_runtime79.jsx)("p", { className: "text-xxs text-white/35", children: "Enter a specific asset ID to receive it, or leave empty to accept any RGB asset to this invoice." })
|
|
8175
8203
|
] }),
|
|
8176
|
-
isRgbOnchain && /* @__PURE__ */ (0,
|
|
8177
|
-
/* @__PURE__ */ (0,
|
|
8178
|
-
/* @__PURE__ */ (0,
|
|
8179
|
-
/* @__PURE__ */ (0,
|
|
8180
|
-
/* @__PURE__ */ (0,
|
|
8204
|
+
isRgbOnchain && /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "space-y-2.5 rounded-xl border bg-card p-3", children: [
|
|
8205
|
+
/* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
|
|
8206
|
+
/* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "min-w-0 flex-1", children: [
|
|
8207
|
+
/* @__PURE__ */ (0, import_jsx_runtime79.jsx)("h4", { className: "text-xs font-bold text-white", children: usePrivacy ? "Blinded receive" : "Witness receive" }),
|
|
8208
|
+
/* @__PURE__ */ (0, import_jsx_runtime79.jsx)("p", { className: "mt-0.5 text-xxs text-muted-foreground", children: usePrivacy ? "Private - recommended" : "Simpler - less private" })
|
|
8181
8209
|
] }),
|
|
8182
|
-
/* @__PURE__ */ (0,
|
|
8210
|
+
/* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
|
|
8183
8211
|
"button",
|
|
8184
8212
|
{
|
|
8185
8213
|
type: "button",
|
|
@@ -8189,7 +8217,7 @@ function DepositPreGeneration({
|
|
|
8189
8217
|
usePrivacy ? "bg-primary" : "bg-white/10"
|
|
8190
8218
|
),
|
|
8191
8219
|
onClick: () => setUsePrivacy(!usePrivacy),
|
|
8192
|
-
children: /* @__PURE__ */ (0,
|
|
8220
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
|
|
8193
8221
|
"span",
|
|
8194
8222
|
{
|
|
8195
8223
|
className: cn(
|
|
@@ -8201,8 +8229,8 @@ function DepositPreGeneration({
|
|
|
8201
8229
|
}
|
|
8202
8230
|
)
|
|
8203
8231
|
] }),
|
|
8204
|
-
/* @__PURE__ */ (0,
|
|
8205
|
-
usePrivacy && colorableUtxoCount !== void 0 && /* @__PURE__ */ (0,
|
|
8232
|
+
/* @__PURE__ */ (0, import_jsx_runtime79.jsx)("p", { className: "text-tiny leading-relaxed text-white/45", children: usePrivacy ? "Blinded: the sender never sees which UTXO you receive into. Spends one of your colorable UTXOs as the receiving slot." : "Witness: the sender creates the receiving UTXO for you. No colorable UTXO needed, but the sender sees the receiving output." }),
|
|
8233
|
+
usePrivacy && colorableUtxoCount !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
|
|
8206
8234
|
"div",
|
|
8207
8235
|
{
|
|
8208
8236
|
className: cn(
|
|
@@ -8210,26 +8238,26 @@ function DepositPreGeneration({
|
|
|
8210
8238
|
colorableUtxoCount > 0 ? "border-success/20 bg-success/5 text-success/80" : "border-warning/20 bg-warning/5 text-warning/80"
|
|
8211
8239
|
),
|
|
8212
8240
|
children: [
|
|
8213
|
-
/* @__PURE__ */ (0,
|
|
8214
|
-
/* @__PURE__ */ (0,
|
|
8241
|
+
/* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: "font-medium", children: "Available colorable UTXOs" }),
|
|
8242
|
+
/* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: "font-mono font-bold", children: colorableUtxoCount })
|
|
8215
8243
|
]
|
|
8216
8244
|
}
|
|
8217
8245
|
),
|
|
8218
|
-
usePrivacy && colorableUtxoCount === 0 && /* @__PURE__ */ (0,
|
|
8246
|
+
usePrivacy && colorableUtxoCount === 0 && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("p", { className: "text-tiny text-warning/70", children: "None available \u2014 create a colorable UTXO below to receive privately, or switch off privacy to use a witness receive." })
|
|
8219
8247
|
] }),
|
|
8220
|
-
network === "onchain" && !isBtc && /* @__PURE__ */ (0,
|
|
8221
|
-
/* @__PURE__ */ (0,
|
|
8222
|
-
/* @__PURE__ */ (0,
|
|
8248
|
+
network === "onchain" && !isBtc && /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "space-y-1.5", children: [
|
|
8249
|
+
/* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex items-center justify-between", children: [
|
|
8250
|
+
/* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("label", { className: "text-xxs font-bold uppercase tracking-widest text-white/40", children: [
|
|
8223
8251
|
"Amount (",
|
|
8224
8252
|
getUnitLabel(),
|
|
8225
8253
|
") - Optional"
|
|
8226
8254
|
] }),
|
|
8227
|
-
selectedAsset && /* @__PURE__ */ (0,
|
|
8255
|
+
selectedAsset && /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("span", { className: "text-xxs text-white/30", children: [
|
|
8228
8256
|
selectedAsset.precision ?? 0,
|
|
8229
8257
|
" decimals"
|
|
8230
8258
|
] })
|
|
8231
8259
|
] }),
|
|
8232
|
-
/* @__PURE__ */ (0,
|
|
8260
|
+
/* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
|
|
8233
8261
|
"input",
|
|
8234
8262
|
{
|
|
8235
8263
|
type: "text",
|
|
@@ -8241,18 +8269,18 @@ function DepositPreGeneration({
|
|
|
8241
8269
|
}
|
|
8242
8270
|
)
|
|
8243
8271
|
] }),
|
|
8244
|
-
needsColorableUtxos && /* @__PURE__ */ (0,
|
|
8245
|
-
/* @__PURE__ */ (0,
|
|
8246
|
-
/* @__PURE__ */ (0,
|
|
8272
|
+
needsColorableUtxos && /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(AlertBanner, { variant: "warning", children: [
|
|
8273
|
+
/* @__PURE__ */ (0, import_jsx_runtime79.jsx)("p", { className: "mb-0.5 text-xs font-bold text-warning", children: "Colorable UTXOs Required" }),
|
|
8274
|
+
/* @__PURE__ */ (0, import_jsx_runtime79.jsx)("p", { className: "text-tiny text-warning/70", children: "To receive RGB assets on-chain you need at least one uncolored UTXO. Create some now and the invoice will be generated automatically." })
|
|
8247
8275
|
] }),
|
|
8248
|
-
!isAutoGenerate && ((needsColorableUtxos || isRgbOnchain && usePrivacy && colorableUtxoCount === 0) && onOpenCreateUtxos ? /* @__PURE__ */ (0,
|
|
8249
|
-
/* @__PURE__ */ (0,
|
|
8276
|
+
!isAutoGenerate && ((needsColorableUtxos || isRgbOnchain && usePrivacy && colorableUtxoCount === 0) && onOpenCreateUtxos ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Button, { variant: "cta", size: "cta", onClick: onOpenCreateUtxos, disabled: loading, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("span", { className: "flex items-center justify-center gap-2", children: [
|
|
8277
|
+
/* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: "material-symbols-outlined text-icon-md", children: "add_circle" }),
|
|
8250
8278
|
"Create Colorable UTXOs"
|
|
8251
|
-
] }) }) : /* @__PURE__ */ (0,
|
|
8252
|
-
/* @__PURE__ */ (0,
|
|
8279
|
+
] }) }) : /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Button, { variant: "cta", size: "cta", onClick: generateInvoice, disabled: loading, children: loading ? /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("span", { className: "flex items-center justify-center gap-2", children: [
|
|
8280
|
+
/* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: "material-symbols-outlined animate-spin text-icon-md", children: "progress_activity" }),
|
|
8253
8281
|
"Generating..."
|
|
8254
|
-
] }) : /* @__PURE__ */ (0,
|
|
8255
|
-
/* @__PURE__ */ (0,
|
|
8282
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("span", { className: "flex items-center justify-center gap-2", children: [
|
|
8283
|
+
/* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: "material-symbols-outlined text-icon-md", children: "qr_code_2" }),
|
|
8256
8284
|
"Generate Address"
|
|
8257
8285
|
] }) }))
|
|
8258
8286
|
] });
|
|
@@ -8260,7 +8288,7 @@ function DepositPreGeneration({
|
|
|
8260
8288
|
|
|
8261
8289
|
// src/web/components/deposit-asset-selection.tsx
|
|
8262
8290
|
var import_react17 = require("react");
|
|
8263
|
-
var
|
|
8291
|
+
var import_jsx_runtime80 = require("react/jsx-runtime");
|
|
8264
8292
|
var ADD_ASSET_SUBTITLE = {
|
|
8265
8293
|
RGB: "RGB asset on Bitcoin",
|
|
8266
8294
|
SPARK: "Spark-native asset",
|
|
@@ -8337,8 +8365,8 @@ function DepositAssetSelection({
|
|
|
8337
8365
|
titleHoverClass: "group-hover:text-network-arkade"
|
|
8338
8366
|
}
|
|
8339
8367
|
].filter((option) => option.enabled);
|
|
8340
|
-
return /* @__PURE__ */ (0,
|
|
8341
|
-
/* @__PURE__ */ (0,
|
|
8368
|
+
return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "relative flex h-screen flex-col overflow-hidden bg-background pt-16 font-display text-foreground", children: [
|
|
8369
|
+
/* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "absolute left-4 top-4 z-30", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
|
|
8342
8370
|
Button,
|
|
8343
8371
|
{
|
|
8344
8372
|
type: "button",
|
|
@@ -8346,10 +8374,10 @@ function DepositAssetSelection({
|
|
|
8346
8374
|
size: "icon-xl",
|
|
8347
8375
|
onClick: () => setCurrentView("dashboard"),
|
|
8348
8376
|
"aria-label": "Go back",
|
|
8349
|
-
children: /* @__PURE__ */ (0,
|
|
8377
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Icon, { name: "arrow_back", size: "xl" })
|
|
8350
8378
|
}
|
|
8351
8379
|
) }),
|
|
8352
|
-
/* @__PURE__ */ (0,
|
|
8380
|
+
/* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "flex-shrink-0 px-5 pb-3 pt-4", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
|
|
8353
8381
|
DotPagination,
|
|
8354
8382
|
{
|
|
8355
8383
|
count: 2,
|
|
@@ -8357,8 +8385,8 @@ function DepositAssetSelection({
|
|
|
8357
8385
|
ariaLabel: "Deposit step 1 of 2: select asset"
|
|
8358
8386
|
}
|
|
8359
8387
|
) }),
|
|
8360
|
-
/* @__PURE__ */ (0,
|
|
8361
|
-
/* @__PURE__ */ (0,
|
|
8388
|
+
/* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "flex-shrink-0 px-5 pb-3", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "relative", children: [
|
|
8389
|
+
/* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
|
|
8362
8390
|
Icon,
|
|
8363
8391
|
{
|
|
8364
8392
|
name: "search",
|
|
@@ -8366,7 +8394,7 @@ function DepositAssetSelection({
|
|
|
8366
8394
|
className: "absolute left-3 top-1/2 -translate-y-1/2 text-white/30"
|
|
8367
8395
|
}
|
|
8368
8396
|
),
|
|
8369
|
-
/* @__PURE__ */ (0,
|
|
8397
|
+
/* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
|
|
8370
8398
|
"input",
|
|
8371
8399
|
{
|
|
8372
8400
|
autoFocus: true,
|
|
@@ -8379,8 +8407,8 @@ function DepositAssetSelection({
|
|
|
8379
8407
|
}
|
|
8380
8408
|
)
|
|
8381
8409
|
] }) }),
|
|
8382
|
-
/* @__PURE__ */ (0,
|
|
8383
|
-
btcAsset && /* @__PURE__ */ (0,
|
|
8410
|
+
/* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(ScrollArea, { className: "min-h-0 flex-1", viewportClassName: "space-y-1.5 px-5 pb-3", children: [
|
|
8411
|
+
btcAsset && /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
|
|
8384
8412
|
"button",
|
|
8385
8413
|
{
|
|
8386
8414
|
type: "button",
|
|
@@ -8388,27 +8416,27 @@ function DepositAssetSelection({
|
|
|
8388
8416
|
className: "group flex w-full min-w-0 items-center gap-3 overflow-hidden rounded-2xl bg-white/3 px-4 py-3 text-sm transition-all hover:bg-accent",
|
|
8389
8417
|
onClick: () => onSelectAsset(btcAsset),
|
|
8390
8418
|
children: [
|
|
8391
|
-
/* @__PURE__ */ (0,
|
|
8392
|
-
/* @__PURE__ */ (0,
|
|
8393
|
-
/* @__PURE__ */ (0,
|
|
8394
|
-
/* @__PURE__ */ (0,
|
|
8419
|
+
/* @__PURE__ */ (0, import_jsx_runtime80.jsx)(AssetIcon, { ticker: "BTC", size: 40, className: "flex-shrink-0" }),
|
|
8420
|
+
/* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "min-w-0 flex-1 text-left", children: [
|
|
8421
|
+
/* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "font-bold tracking-wide text-white transition-colors group-hover:text-primary/90", children: "Bitcoin" }),
|
|
8422
|
+
/* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "mt-0.5 text-xs text-white/40", children: "Choose destination account next" })
|
|
8395
8423
|
] }),
|
|
8396
|
-
/* @__PURE__ */ (0,
|
|
8397
|
-
/* @__PURE__ */ (0,
|
|
8398
|
-
/* @__PURE__ */ (0,
|
|
8399
|
-
isSparkConnected && /* @__PURE__ */ (0,
|
|
8400
|
-
isArkadeConnected && /* @__PURE__ */ (0,
|
|
8424
|
+
/* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "hidden min-w-0 max-w-[42%] flex-shrink flex-wrap justify-end gap-1 min-[380px]:flex", children: [
|
|
8425
|
+
/* @__PURE__ */ (0, import_jsx_runtime80.jsx)(NetworkBadge, { network: "L1", size: "sm" }),
|
|
8426
|
+
/* @__PURE__ */ (0, import_jsx_runtime80.jsx)(NetworkBadge, { network: "LN", size: "sm" }),
|
|
8427
|
+
isSparkConnected && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(NetworkBadge, { network: "Spark", size: "sm" }),
|
|
8428
|
+
isArkadeConnected && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(NetworkBadge, { network: "Arkade", size: "sm" })
|
|
8401
8429
|
] }),
|
|
8402
|
-
/* @__PURE__ */ (0,
|
|
8430
|
+
/* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: "material-symbols-outlined flex-shrink-0 text-icon-md text-white/20 transition-colors group-hover:text-white/50", children: "arrow_forward" })
|
|
8403
8431
|
]
|
|
8404
8432
|
}
|
|
8405
8433
|
),
|
|
8406
|
-
noResults ? /* @__PURE__ */ (0,
|
|
8434
|
+
noResults ? /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "py-8 text-center text-sm text-white/30", children: [
|
|
8407
8435
|
'No assets match "',
|
|
8408
8436
|
searchQuery,
|
|
8409
8437
|
'"'
|
|
8410
|
-
] }) : ownedAssetsCount > 0 ? /* @__PURE__ */ (0,
|
|
8411
|
-
/* @__PURE__ */ (0,
|
|
8438
|
+
] }) : ownedAssetsCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "space-y-1.5 pt-1", children: [
|
|
8439
|
+
/* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
|
|
8412
8440
|
"button",
|
|
8413
8441
|
{
|
|
8414
8442
|
type: "button",
|
|
@@ -8421,17 +8449,17 @@ function DepositAssetSelection({
|
|
|
8421
8449
|
isSearching && "cursor-default"
|
|
8422
8450
|
),
|
|
8423
8451
|
children: [
|
|
8424
|
-
/* @__PURE__ */ (0,
|
|
8425
|
-
/* @__PURE__ */ (0,
|
|
8426
|
-
/* @__PURE__ */ (0,
|
|
8427
|
-
!isSearching && /* @__PURE__ */ (0,
|
|
8452
|
+
/* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: "text-xxs font-bold uppercase tracking-[0.18em] text-white/55", children: "Your assets" }),
|
|
8453
|
+
/* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: "inline-flex size-5 items-center justify-center rounded-full bg-white/10 text-tiny font-bold text-white/70", children: ownedAssetsCount }),
|
|
8454
|
+
/* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "flex-1" }),
|
|
8455
|
+
!isSearching && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Icon, { name: showOwnedAssets ? "expand_less" : "expand_more", size: "md", className: "text-white/40" })
|
|
8428
8456
|
]
|
|
8429
8457
|
}
|
|
8430
8458
|
),
|
|
8431
|
-
showOwnedAssets && /* @__PURE__ */ (0,
|
|
8459
|
+
showOwnedAssets && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "space-y-1.5 duration-200 animate-in fade-in slide-in-from-top-1", children: ownedAssets.map((asset) => {
|
|
8432
8460
|
const protocolBadge = asset.accountId ? PROTOCOL_BADGE[asset.accountId] : null;
|
|
8433
8461
|
const balance = asset.balance ?? 0;
|
|
8434
|
-
return /* @__PURE__ */ (0,
|
|
8462
|
+
return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
|
|
8435
8463
|
"button",
|
|
8436
8464
|
{
|
|
8437
8465
|
type: "button",
|
|
@@ -8439,11 +8467,11 @@ function DepositAssetSelection({
|
|
|
8439
8467
|
className: "group flex w-full min-w-0 items-center gap-3 overflow-hidden rounded-2xl border border-white/8 bg-white/3 px-4 py-3 text-sm transition-all hover:border-border hover:bg-accent",
|
|
8440
8468
|
onClick: () => onSelectAsset(asset),
|
|
8441
8469
|
children: [
|
|
8442
|
-
/* @__PURE__ */ (0,
|
|
8443
|
-
/* @__PURE__ */ (0,
|
|
8444
|
-
/* @__PURE__ */ (0,
|
|
8445
|
-
/* @__PURE__ */ (0,
|
|
8446
|
-
protocolBadge && /* @__PURE__ */ (0,
|
|
8470
|
+
/* @__PURE__ */ (0, import_jsx_runtime80.jsx)(AssetIcon, { ticker: asset.ticker, size: 40, className: "flex-shrink-0" }),
|
|
8471
|
+
/* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "min-w-0 flex-1 text-left", children: [
|
|
8472
|
+
/* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "flex min-w-0 items-center gap-1.5", children: [
|
|
8473
|
+
/* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: "truncate font-bold tracking-wide text-white transition-colors group-hover:text-primary/90", children: asset.ticker }),
|
|
8474
|
+
protocolBadge && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
|
|
8447
8475
|
"span",
|
|
8448
8476
|
{
|
|
8449
8477
|
className: cn(
|
|
@@ -8454,36 +8482,36 @@ function DepositAssetSelection({
|
|
|
8454
8482
|
}
|
|
8455
8483
|
)
|
|
8456
8484
|
] }),
|
|
8457
|
-
/* @__PURE__ */ (0,
|
|
8485
|
+
/* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "mt-0.5 truncate text-xs text-white/40", children: asset.name ?? "Asset" })
|
|
8458
8486
|
] }),
|
|
8459
|
-
balance > 0 && /* @__PURE__ */ (0,
|
|
8460
|
-
/* @__PURE__ */ (0,
|
|
8461
|
-
/* @__PURE__ */ (0,
|
|
8487
|
+
balance > 0 && /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "flex-shrink-0 text-right", children: [
|
|
8488
|
+
/* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "font-mono text-xs font-bold text-white", children: formatAssetBalance(asset) }),
|
|
8489
|
+
/* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "mt-0.5 text-tiny uppercase tracking-wider text-white/35", children: asset.ticker })
|
|
8462
8490
|
] }),
|
|
8463
|
-
/* @__PURE__ */ (0,
|
|
8491
|
+
/* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: "material-symbols-outlined flex-shrink-0 text-icon-sm text-white/20 transition-colors group-hover:text-white/50", children: "arrow_forward" })
|
|
8464
8492
|
]
|
|
8465
8493
|
},
|
|
8466
8494
|
asset.asset_id
|
|
8467
8495
|
);
|
|
8468
8496
|
}) })
|
|
8469
8497
|
] }) : null,
|
|
8470
|
-
!searchQuery && /* @__PURE__ */ (0,
|
|
8498
|
+
!searchQuery && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "pb-1 pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
|
|
8471
8499
|
"button",
|
|
8472
8500
|
{
|
|
8473
8501
|
type: "button",
|
|
8474
8502
|
onClick: () => setCurrentView("bridge"),
|
|
8475
8503
|
className: "group flex w-full items-center gap-3 rounded-2xl bg-gradient-to-r from-primary/10 to-primary/5 p-3 transition-all hover:from-primary/20 hover:to-primary/10",
|
|
8476
8504
|
children: [
|
|
8477
|
-
/* @__PURE__ */ (0,
|
|
8478
|
-
/* @__PURE__ */ (0,
|
|
8479
|
-
/* @__PURE__ */ (0,
|
|
8480
|
-
/* @__PURE__ */ (0,
|
|
8505
|
+
/* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-primary/20", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: "material-symbols-outlined text-lg text-primary", children: "swap_calls" }) }),
|
|
8506
|
+
/* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "flex-1 text-left", children: [
|
|
8507
|
+
/* @__PURE__ */ (0, import_jsx_runtime80.jsx)("p", { className: "text-sm font-semibold text-white transition-colors group-hover:text-primary", children: "Bridge from another chain" }),
|
|
8508
|
+
/* @__PURE__ */ (0, import_jsx_runtime80.jsx)("p", { className: "text-xxs leading-tight text-white/40", children: "USDC, USDT, ETH, SOL via Flashnet" })
|
|
8481
8509
|
] }),
|
|
8482
|
-
/* @__PURE__ */ (0,
|
|
8510
|
+
/* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: "material-symbols-outlined text-lg text-white/30 transition-colors group-hover:text-primary", children: "arrow_forward" })
|
|
8483
8511
|
]
|
|
8484
8512
|
}
|
|
8485
8513
|
) }),
|
|
8486
|
-
!searchQuery && newAssetOptions.length > 0 && /* @__PURE__ */ (0,
|
|
8514
|
+
!searchQuery && newAssetOptions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "pb-1 pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
|
|
8487
8515
|
"button",
|
|
8488
8516
|
{
|
|
8489
8517
|
type: "button",
|
|
@@ -8491,27 +8519,27 @@ function DepositAssetSelection({
|
|
|
8491
8519
|
onClick: () => setShowAddAssetModal(true),
|
|
8492
8520
|
className: "group flex w-full items-center gap-3 rounded-2xl border border-white/8 bg-white/3 p-3 transition-all hover:border-border hover:bg-accent",
|
|
8493
8521
|
children: [
|
|
8494
|
-
/* @__PURE__ */ (0,
|
|
8495
|
-
/* @__PURE__ */ (0,
|
|
8496
|
-
/* @__PURE__ */ (0,
|
|
8497
|
-
/* @__PURE__ */ (0,
|
|
8522
|
+
/* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-primary/15", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Icon, { name: "add", size: "md", className: "text-primary" }) }),
|
|
8523
|
+
/* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "flex-1 text-left", children: [
|
|
8524
|
+
/* @__PURE__ */ (0, import_jsx_runtime80.jsx)("p", { className: "text-sm font-semibold text-white transition-colors group-hover:text-primary", children: "Add an asset" }),
|
|
8525
|
+
/* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("p", { className: "text-xxs leading-tight text-white/40", children: [
|
|
8498
8526
|
"Receive a new ",
|
|
8499
8527
|
newAssetOptions.map((o) => o.ticker).join(", "),
|
|
8500
8528
|
" asset"
|
|
8501
8529
|
] })
|
|
8502
8530
|
] }),
|
|
8503
|
-
/* @__PURE__ */ (0,
|
|
8531
|
+
/* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: "material-symbols-outlined text-lg text-white/30 transition-colors group-hover:text-primary", children: "arrow_forward" })
|
|
8504
8532
|
]
|
|
8505
8533
|
}
|
|
8506
8534
|
) })
|
|
8507
8535
|
] }),
|
|
8508
|
-
/* @__PURE__ */ (0,
|
|
8536
|
+
/* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
|
|
8509
8537
|
BottomSheet,
|
|
8510
8538
|
{
|
|
8511
8539
|
open: showAddAssetModal,
|
|
8512
8540
|
title: "Add an asset",
|
|
8513
8541
|
onClose: () => setShowAddAssetModal(false),
|
|
8514
|
-
children: /* @__PURE__ */ (0,
|
|
8542
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "space-y-2", children: newAssetOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
|
|
8515
8543
|
"button",
|
|
8516
8544
|
{
|
|
8517
8545
|
type: "button",
|
|
@@ -8525,12 +8553,12 @@ function DepositAssetSelection({
|
|
|
8525
8553
|
handleAddNewAsset(option.account);
|
|
8526
8554
|
},
|
|
8527
8555
|
children: [
|
|
8528
|
-
/* @__PURE__ */ (0,
|
|
8529
|
-
/* @__PURE__ */ (0,
|
|
8530
|
-
/* @__PURE__ */ (0,
|
|
8531
|
-
/* @__PURE__ */ (0,
|
|
8556
|
+
/* @__PURE__ */ (0, import_jsx_runtime80.jsx)(AssetIcon, { ticker: option.ticker, size: 36, className: "flex-shrink-0" }),
|
|
8557
|
+
/* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "min-w-0 flex-1", children: [
|
|
8558
|
+
/* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: cn("text-sm font-bold tracking-wide text-white", option.titleHoverClass), children: option.title }),
|
|
8559
|
+
/* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "mt-0.5 text-xxs text-white/40", children: ADD_ASSET_SUBTITLE[option.account] })
|
|
8532
8560
|
] }),
|
|
8533
|
-
/* @__PURE__ */ (0,
|
|
8561
|
+
/* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Icon, { name: "add", size: "sm", className: "text-white/30 transition-colors group-hover:text-white/60" })
|
|
8534
8562
|
]
|
|
8535
8563
|
},
|
|
8536
8564
|
option.account
|
|
@@ -8541,7 +8569,7 @@ function DepositAssetSelection({
|
|
|
8541
8569
|
}
|
|
8542
8570
|
|
|
8543
8571
|
// src/web/components/deposit-invoice-generation.tsx
|
|
8544
|
-
var
|
|
8572
|
+
var import_jsx_runtime81 = require("react/jsx-runtime");
|
|
8545
8573
|
var ACCOUNT_TITLES2 = {
|
|
8546
8574
|
RGB: "RGB & Lightning",
|
|
8547
8575
|
SPARK: "Spark",
|
|
@@ -8696,7 +8724,7 @@ function DepositInvoiceGeneration({
|
|
|
8696
8724
|
if (nextMethod) applyMethodSelection(account, nextMethod);
|
|
8697
8725
|
};
|
|
8698
8726
|
if (depositDetected) {
|
|
8699
|
-
return /* @__PURE__ */ (0,
|
|
8727
|
+
return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
|
|
8700
8728
|
DepositSuccessScreen,
|
|
8701
8729
|
{
|
|
8702
8730
|
handleDone,
|
|
@@ -8713,15 +8741,15 @@ function DepositInvoiceGeneration({
|
|
|
8713
8741
|
const showChannelWarning = selectedAccount === "RGB" && network === "lightning" && !channelsLoading && channels.length === 0 && !isSparkConnected;
|
|
8714
8742
|
const showLiquidityWarning = !isSparkLightning && network === "lightning" && maxDepositAmount === 0 && !channelsLoading && !isBtc;
|
|
8715
8743
|
const isNewRgbAsset = isNewAsset && assetFamily === "RGB";
|
|
8716
|
-
return /* @__PURE__ */ (0,
|
|
8717
|
-
/* @__PURE__ */ (0,
|
|
8744
|
+
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: [
|
|
8745
|
+
/* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "absolute left-4 top-4 z-30", children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Button, { type: "button", variant: "ghost", size: "icon-xl", onClick: handleBack, "aria-label": "Go back", children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Icon, { name: "arrow_back", size: "xl" }) }) }),
|
|
8718
8746
|
(() => {
|
|
8719
8747
|
const hideDestinationRail = isNewAsset && (network === "spark" || network === "arkade");
|
|
8720
8748
|
if (hideDestinationRail) return null;
|
|
8721
|
-
return /* @__PURE__ */ (0,
|
|
8722
|
-
/* @__PURE__ */ (0,
|
|
8723
|
-
/* @__PURE__ */ (0,
|
|
8724
|
-
/* @__PURE__ */ (0,
|
|
8749
|
+
return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "flex-shrink-0 border-b border-border bg-background px-4 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "space-y-2", children: [
|
|
8750
|
+
/* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { children: [
|
|
8751
|
+
/* @__PURE__ */ (0, import_jsx_runtime81.jsx)("p", { className: "text-xxs font-bold uppercase tracking-widest text-white/35", children: "Destination Account" }),
|
|
8752
|
+
/* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "mt-1.5 flex gap-1.5 overflow-x-auto no-scrollbar", children: availableAccounts.map((account) => /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
|
|
8725
8753
|
AccountChoiceChip,
|
|
8726
8754
|
{
|
|
8727
8755
|
account,
|
|
@@ -8746,9 +8774,9 @@ function DepositInvoiceGeneration({
|
|
|
8746
8774
|
account
|
|
8747
8775
|
)) })
|
|
8748
8776
|
] }),
|
|
8749
|
-
!isBtc && !(isNewAsset && (network === "spark" || network === "arkade")) && /* @__PURE__ */ (0,
|
|
8750
|
-
/* @__PURE__ */ (0,
|
|
8751
|
-
/* @__PURE__ */ (0,
|
|
8777
|
+
!isBtc && !(isNewAsset && (network === "spark" || network === "arkade")) && /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { children: [
|
|
8778
|
+
/* @__PURE__ */ (0, import_jsx_runtime81.jsx)("p", { className: "text-xxs font-bold uppercase tracking-widest text-white/35", children: "Transfer Method" }),
|
|
8779
|
+
/* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "mt-1.5 flex gap-1.5 overflow-x-auto no-scrollbar", children: methodOptions.map(({ method, enabled, disabledReason }) => /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
|
|
8752
8780
|
MethodChoiceChip,
|
|
8753
8781
|
{
|
|
8754
8782
|
method,
|
|
@@ -8762,7 +8790,7 @@ function DepositInvoiceGeneration({
|
|
|
8762
8790
|
] })
|
|
8763
8791
|
] }) });
|
|
8764
8792
|
})(),
|
|
8765
|
-
/* @__PURE__ */ (0,
|
|
8793
|
+
/* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ScrollArea, { className: "flex-1", viewportAs: "main", viewportClassName: "space-y-2.5 px-4 py-2.5", children: isBtc && accountReceiveResult ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
|
|
8766
8794
|
BtcUnifiedReceive,
|
|
8767
8795
|
{
|
|
8768
8796
|
btcSelectedAccount,
|
|
@@ -8782,8 +8810,8 @@ function DepositInvoiceGeneration({
|
|
|
8782
8810
|
setAccountReceiveResult,
|
|
8783
8811
|
handleDone
|
|
8784
8812
|
}
|
|
8785
|
-
) : isBtc && !accountReceiveResult && loading ? /* @__PURE__ */ (0,
|
|
8786
|
-
/* @__PURE__ */ (0,
|
|
8813
|
+
) : isBtc && !accountReceiveResult && loading ? /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "flex flex-col items-center gap-4 py-10", children: [
|
|
8814
|
+
/* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
|
|
8787
8815
|
"div",
|
|
8788
8816
|
{
|
|
8789
8817
|
className: cn(
|
|
@@ -8791,7 +8819,7 @@ function DepositInvoiceGeneration({
|
|
|
8791
8819
|
NETWORK_CONFIG[btcSelectedAccount === "SPARK" ? "spark" : btcSelectedAccount === "ARKADE" ? "arkade" : "onchain"].bg,
|
|
8792
8820
|
NETWORK_CONFIG[btcSelectedAccount === "SPARK" ? "spark" : btcSelectedAccount === "ARKADE" ? "arkade" : "onchain"].border
|
|
8793
8821
|
),
|
|
8794
|
-
children: /* @__PURE__ */ (0,
|
|
8822
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
|
|
8795
8823
|
"span",
|
|
8796
8824
|
{
|
|
8797
8825
|
className: cn(
|
|
@@ -8803,11 +8831,11 @@ function DepositInvoiceGeneration({
|
|
|
8803
8831
|
)
|
|
8804
8832
|
}
|
|
8805
8833
|
),
|
|
8806
|
-
/* @__PURE__ */ (0,
|
|
8807
|
-
/* @__PURE__ */ (0,
|
|
8808
|
-
/* @__PURE__ */ (0,
|
|
8834
|
+
/* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "space-y-1 text-center", children: [
|
|
8835
|
+
/* @__PURE__ */ (0, import_jsx_runtime81.jsx)("p", { className: "text-sm font-bold text-muted-foreground", children: "Generating addresses..." }),
|
|
8836
|
+
/* @__PURE__ */ (0, import_jsx_runtime81.jsx)("p", { className: "text-xs text-white/30", children: ACCOUNT_TITLES2[btcSelectedAccount] })
|
|
8809
8837
|
] })
|
|
8810
|
-
] }) : !address ? /* @__PURE__ */ (0,
|
|
8838
|
+
] }) : !address ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
|
|
8811
8839
|
DepositPreGeneration,
|
|
8812
8840
|
{
|
|
8813
8841
|
selectedAsset,
|
|
@@ -8831,7 +8859,7 @@ function DepositInvoiceGeneration({
|
|
|
8831
8859
|
onOpenCreateUtxos,
|
|
8832
8860
|
showReceiveSummary: !isNewRgbAsset
|
|
8833
8861
|
}
|
|
8834
|
-
) : /* @__PURE__ */ (0,
|
|
8862
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
|
|
8835
8863
|
DepositGeneratedView,
|
|
8836
8864
|
{
|
|
8837
8865
|
network,
|
|
@@ -8981,6 +9009,7 @@ function DepositInvoiceGeneration({
|
|
|
8981
9009
|
StepperNumberInput,
|
|
8982
9010
|
SwapInputCard,
|
|
8983
9011
|
Switch,
|
|
9012
|
+
SwitchRow,
|
|
8984
9013
|
Tabs,
|
|
8985
9014
|
TabsContent,
|
|
8986
9015
|
TabsList,
|